我有一个 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”,这是在选择框中加载时应显示的内容。