我有一个html选择输入。在这里我使用AngularJS:
<select class="form-control"
ng-model="t.selected"
ng-options="option | matriseValgFilter for option in t.Valgalternativer"
ng-change="change(t.selected)">
</select>
问题是t.select已定义,但它没有显示在html选择列表框中。如果我选择了某些内容,则t.select更改并且显示的值正确更改,我希望它在加载时显示t.select。
这是角度代码,是一个小提琴,可以更好地说明: https://jsfiddle.net/fiddlejan/Lt0cuwLd/
angular.module('app', ['ngAnimate'])
.controller('controller', function($scope) {
$scope.t = {
"Tabellnavn": "BE3.2:1",
"Siffer": "x",
"Stikkord": "Utvendig kledning:",
"Tekst": {
"Format": 0,
"Content": "{Matrise BE3.2:1}"
},
"Merknader": null,
"Delprodukter": null,
"Valgalternativer": [{
"Siffer": "-",
"Tekst": "{Matrise BE3.2:1}",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "00",
"Tekst": "Valgfri",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "11",
"Tekst": "Murt forblending",
"Tekst2": null,
"Kode": "NB2.7---x-",
"Delalternativer": null
}, {
"Siffer": "21",
"Tekst": "Bordkledning på vegg utvendig – stående bord",
"Tekst2": null,
"Kode": "QK2.11xx---",
"Delalternativer": null
}, {
"Siffer": "22",
"Tekst": "Bordkledning på vegg utvendig – stående ukantede bord",
"Tekst2": null,
"Kode": "QK2.12x---",
"Delalternativer": null
}, {
"Siffer": "23",
"Tekst": "Bordkledning på vegg utvendig – stående spaltekledning",
"Tekst2": null,
"Kode": "QK2.15xx---",
"Delalternativer": null
}, {
"Siffer": "24",
"Tekst": "Bordkledning på vegg utvendig - liggende bord",
"Tekst2": null,
"Kode": "QK2.21xx---",
"Delalternativer": null
}, {
"Siffer": "26",
"Tekst": "Platekledning på vertikal flate utvendig utvendig",
"Tekst2": null,
"Kode": "QK5.226--",
"Delalternativer": null
}, {
"Siffer": "31",
"Tekst": "Kledning med tynnplatekassetter av kopper",
"Tekst2": null,
"Kode": "SM4.2--",
"Delalternativer": null
}, {
"Siffer": "32",
"Tekst": "Kledning med tynnplatekassetter av titansink",
"Tekst2": null,
"Kode": "SM4.3--",
"Delalternativer": null
}, {
"Siffer": "33",
"Tekst": "Kledning med tynnplatekassetter av aluminium",
"Tekst2": null,
"Kode": "SM4.4--",
"Delalternativer": null
}, {
"Siffer": "34",
"Tekst": "Kledning med tynnplatekassetter av varmforsinket stål",
"Tekst2": null,
"Kode": "SM4.5--",
"Delalternativer": null
}, {
"Siffer": "35",
"Tekst": "Kledning med plane metallplater",
"Tekst2": null,
"Kode": "SM5.1",
"Delalternativer": null
}, {
"Siffer": "88",
"Tekst": "Uten utvendig kledning",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}],
"selected": {
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}
};
$scope.change = function(selected) {
console.log(selected);
}
})
.filter('matriseValgFilter', function() {
return function (option) {
if (!isNaN(option.Siffer) && option.Kode != null){
return option.Siffer + ' - ' + option.Tekst + ' (' + option.Kode + ')';
}
if (!isNaN(option.Siffer)){
return option.Siffer + ' - ' + option.Tekst;
}
return option.Tekst;
}
});
编辑: 为了澄清,t.select设置为“99 - Annen utvendig kledning - måspesifiseres”这是应该在选择框中加载时显示的内容。
答案 0 :(得分:0)
您需要初始化您的变量t.selected,如$scope.t.selected = $scope.t.Valgalternativer[0];
。
jsfiddle上的实例。
angular.module('app', ['ngAnimate'])
.controller('controller', function($scope) {
$scope.t = {
"Tabellnavn": "BE3.2:1",
"Siffer": "x",
"Stikkord": "Utvendig kledning:",
"Tekst": {
"Format": 0,
"Content": "{Matrise BE3.2:1}"
},
"Merknader": null,
"Delprodukter": null,
"Valgalternativer": [{
"Siffer": "-",
"Tekst": "{Matrise BE3.2:1}",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "00",
"Tekst": "Valgfri",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "11",
"Tekst": "Murt forblending",
"Tekst2": null,
"Kode": "NB2.7---x-",
"Delalternativer": null
}, {
"Siffer": "21",
"Tekst": "Bordkledning på vegg utvendig – stående bord",
"Tekst2": null,
"Kode": "QK2.11xx---",
"Delalternativer": null
}, {
"Siffer": "22",
"Tekst": "Bordkledning på vegg utvendig – stående ukantede bord",
"Tekst2": null,
"Kode": "QK2.12x---",
"Delalternativer": null
}, {
"Siffer": "23",
"Tekst": "Bordkledning på vegg utvendig – stående spaltekledning",
"Tekst2": null,
"Kode": "QK2.15xx---",
"Delalternativer": null
}, {
"Siffer": "24",
"Tekst": "Bordkledning på vegg utvendig - liggende bord",
"Tekst2": null,
"Kode": "QK2.21xx---",
"Delalternativer": null
}, {
"Siffer": "26",
"Tekst": "Platekledning på vertikal flate utvendig utvendig",
"Tekst2": null,
"Kode": "QK5.226--",
"Delalternativer": null
}, {
"Siffer": "31",
"Tekst": "Kledning med tynnplatekassetter av kopper",
"Tekst2": null,
"Kode": "SM4.2--",
"Delalternativer": null
}, {
"Siffer": "32",
"Tekst": "Kledning med tynnplatekassetter av titansink",
"Tekst2": null,
"Kode": "SM4.3--",
"Delalternativer": null
}, {
"Siffer": "33",
"Tekst": "Kledning med tynnplatekassetter av aluminium",
"Tekst2": null,
"Kode": "SM4.4--",
"Delalternativer": null
}, {
"Siffer": "34",
"Tekst": "Kledning med tynnplatekassetter av varmforsinket stål",
"Tekst2": null,
"Kode": "SM4.5--",
"Delalternativer": null
}, {
"Siffer": "35",
"Tekst": "Kledning med plane metallplater",
"Tekst2": null,
"Kode": "SM5.1",
"Delalternativer": null
}, {
"Siffer": "88",
"Tekst": "Uten utvendig kledning",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}, {
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}],
"selected": {
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}
};
$scope.t.selected = $scope.t.Valgalternativer[0];
})
.filter('matriseValgFilter', function() {
return function (option) {
if (!isNaN(option.Siffer) && option.Kode != null){
return option.Siffer + ' - ' + option.Tekst + ' (' + option.Kode + ')';
}
if (!isNaN(option.Siffer)){
return option.Siffer + ' - ' + option.Tekst;
}
return option.Tekst;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>
<body ng-app="app">
<div ng-controller="controller as c" style="padding:10px;">
<select class="form-control"
ng-model="t.selected"
ng-options="option | matriseValgFilter for option in t.Valgalternativer" >
</select>
<pre style="margin-top: 10px;">
{{t.selected | json}}
</pre>
</div>
</body>
哦......我明白了。您可以在变量t.selected
中定义t
。但它不起作用,因为
{
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}!= {
"Siffer": "99",
"Tekst": "Annen utvendig kledning – må spesifiseres",
"Tekst2": null,
"Kode": null,
"Delalternativer": null
}
另一个词不相同。
$scope.t.Valgalternativer[$scope.t.Valgalternativer.length-1]!=$scope.t.selected
试试这个
$scope.t.selected = .Valgalternativer[$scope.t.Valgalternativer.length-1];
答案 1 :(得分:0)
修改强>
根据你的评论,为了实现这一点,一种方法是像这样设置所选属性。
$scope.t.selected =$scope.t.Valgalternativer[2];
如果对象来自另一个服务或json,您可能必须从t.Valgalternativer中查找/过滤,然后分配适当的索引。
这是因为,正如在其他答案中指出的那样,如果按照您正在进行的方式初始化选择,那么它将是一个哈希值不同的新对象。
如果您喜欢这种方法,请从t中删除“selected”属性并按上述方式单独添加。无需更改任何标记。
<强>初始强>
试试这个
<select class="form-control"
ng-model="t.selected"
ng-options="option | matriseValgFilter as option | matriseValgFilter for option in t.Valgalternativer"
ng-change="change(t.selected)"
ng-init='t.selected = "99 - Annen utvendig kledning – må spesifiseres"'>
</select>
您选择的选项的viewValue应与select的其中一个选项的值匹配。
as
语法用于为select中的选项设置值。文档here。
答案 2 :(得分:0)
t.selected中的对象和t.Valgalternativer根据javascript不同。因为它们的哈希值不同。 Javascript只比较哈希值的相等性。只有我们程序员必须教授Javascript,才能将其与“Tekst”进行比较。字段代替&#39; $ hash&#39;。
工作JSFiddle - https://jsfiddle.net/Lt0cuwLd/6/
以下是我添加的唯一代码。它只是浏览列表中的每个项目并比较它的“Tekst”和“#t; t.selected&#39; Tekst&#39;值。如果它们都相等,它将返回该对象,并将其分配给t.selected。现在选择&#39; $ hash&#39;价值也匹配,而不只是'Tekst&#39; 毕竟计算机并不像人类一样聪明:)
$scope.t.selected = $scope.t.Valgalternativer.reduce(function(curr, next){
if(next.Tekst === $scope.t.selected.Tekst) return next;
else return curr;
}, {})
答案 3 :(得分:0)
在我的实际应用程序中,没有一个答案正常工作,但是使用我用ng-init调用的控制器中的方法解决了它。
结束了这个:
<select class="form-control"
ng-init="loadMatriseValg(node, t)"
ng-model="t.selected"
ng-options="option | matriseValgFilter for option in t.Valgalternativer"
ng-change="changeMatrise(node, t.selected, '{{t.selected.Kode}}')"></select>
然后在控制器中我有这个:
$scope.loadMatriseValg = function (node, t) {
// user has not selected anything, set default value
if (!t.selected) {
t.selected = t.Valgalternativer[0];
}
// loop through all valg alternativer
for (var v = 0; v < t.Valgalternativer.length; v++) {
if (t.Valgalternativer[v].Siffer == t.selected.Siffer) {
t.selected = t.Valgalternativer[v];
return;
}
}
}
这里的小提琴: