NG选项不显示在有负载时的选择框的NG-模型对象(AngularJS) [英] ng-options doesn't show the ng-model object in the select box on load (AngularJS)
问题描述
我有一个HTML选择输入。这里我用AngularJS:
I have a html select input. Here I use 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。
Problem is that t.select is defined, but it does not show up in the html select listbox. If I select something, then t.select changes and the displayed value changes correctly, I want it to display the t.select on load.
这是角code,做了小提琴来说明更好:
https://jsfiddle.net/fiddlejan/Lt0cuwLd/
This is the angular code, made a fiddle to illustrate better: 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 - 安嫩utvendig kledning - 马spesifiseres这是应该显示在加载时的选择框。
To clarify, t.select is set to "99 - Annen utvendig kledning – må spesifiseres" this is what should show on load in the select box.
推荐答案
的答案都不正确地在我的实际应用,只是用在我和NG-INIT调用控制器的方法解决它。
None of the answers worked properly in my actual application, but solved it using a method in the controller that I call with 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>
然后在控制器我有这样的:
Then in the controller I have this:
$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;
}
}
}
在这里新建小提琴:
New fiddle here:
https://jsfiddle.net/fiddlejan/wng2genw/
这篇关于NG选项不显示在有负载时的选择框的NG-模型对象(AngularJS)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!