0
在此示例中,默认情况下未选择预定义项目。请帮助实现这一点。使用angularjs预填充选择框
<button ng-click="addRow()">Add Row</button>
<ul>
<li ng-repeat="row in rows">
<select kendo-drop-down-list ng-model="row.selected" ng-init="row.selected = row.choosenItem" ng-options="item.name for item in list | filter:notUsed(row)"></select>
<button ng-click="deleteRow(row)">X</button>
</li>
</ul>
var app = angular.module('plunker', []);
在row.choosenItem属性中选择的数据($ scope.rows)项中。仍然选择框不填充choosenItem。
app.controller('MainCtrl', function($scope) {
$scope.list = [{
id: 1,
name: "one"
}, {
id: 2,
name: "Two"
}, {
id: 3,
name: "Three"
}, {
id: 4,
name: "Four"
}, {
id: 5,
name: "Five"
}, {
id: 6,
name: "Six"
}];
$scope.rows = [{
choosenItem: {
id: 2,
name: "Two"
},
label: "row 1",
selected: 2
}, {
choosenItem: {
id: 4,
name: "Four"
},
label: "row 2",
selected: 4
}];
function byID(member) {
return member.choosenItem.id;
}
$scope.notUsed = function(row) {
return function(item) {
return item.id === row.choosenItem.id || !_.indexBy($scope.rows, byID)[item.id];
}
};
$scope.addRow = function addRow() {
$scope.rows.push({
choosenItem: {},
label: "row "+($scope.rows.length+1),
selected: 0
})
};
$scope.deleteRow = function deleteRow(row) {
};
$scope.onSelectChange = function onSelectChange(row){
row.choosenItem = _.findWhere($scope.list, {'id': parseInt(row.selected)});
};
});