[英]angular js select ng-options
I have a code 我有一个密码
app.controller('SelectCtrl', ['$scope', '$routeParams', '$http', '$q',
function($scope, $routeParams, $http, $q) {
var deferred = $q.defer();
$http.get('json/newjson.json').success(function(responce) {
deferred.resolve(responce);
});
deferred.promise.then(function(data) {
$scope.values = data;
$scope.recepients = [20, 23];
$scope.ids = _.pluck($scope.values, "id");
$scope.free = _.difference($scope.ids, $scope.recepients);
recalc();
});
function recalc() {
$scope.recepients.forEach(function(v, index) {
$scope.vals[index] = [];
$scope.ids.forEach(function(val, i) {
if (_.indexOf($scope.free, val) > -1 || val === $scope.recepients[index]) {
$scope.vals[index].push($scope.values[i]);
}
});
});
}
$scope.add = function() {
if ($scope.recepients.length < $scope.values.length) {
$scope.recepients.push($scope.free.shift());
recalc();
}
};
$scope.remove = function(index) {
$scope.recepients.splice(index, 1);
$scope.free = _.difference($scope.ids, $scope.recepients);
recalc();
}
$scope.change = function() {
$scope.free = _.difference($scope.ids, $scope.recepients);
recalc();
};
$scope.vals = [];
}]);
and html view 和html视图
<table class="table">
<tr data-ng-repeat="recepient in recepients">
<td class="col-md-8">
<select class="form-control" data-ng-model="recepients[$index]" data-ng-change="change()" data-ng-options="type.id as type.name for (key , type) in vals[$index]"></select>
</td>
<td>
<button class="btn btn-danger" data-ng-click="remove($index)"><span class="glyphicon glyphicon-remove"></span>remove</button>
</td>
</tr>
</table>
<button data-ng-click="add()" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>add</button>
If I push the button to add a row is added to the unused OPTION. 如果我按下按钮添加一行,则会添加到未使用的OPTION中。 in chrome it is work in chrome it works fine, but in IE9 if i add row and change her, previous options changed too here is working example http://run.plnkr.co/plunks/43cXzghuFAFkbr2xW75e/#/ 在chrome中可以在chrome中正常工作,但是在IE9中,如果我添加行并更改了她,以前的选项也更改了,在这里是工作示例http://run.plnkr.co/plunks/43cXzghuFAFkbr2xW75e/#/
I wouldn't bind to a literal in an array. 我不会绑定到数组中的文字。
Fill the array with objects , perhaps just have a value field. 用对象填充数组 ,也许只有一个value字段。 {value: 3}
I didn't test it, but that should fix your problem. {value: 3}
我没有测试过,但这应该可以解决您的问题。
Even better, use a directive each with their own scope. 更好的是,使用每个都有自己范围的指令。 set scope: true
in the directive return block, aka options. 设置scope: true
在指令返回块(也称为选项)中为scope: true
。
https://docs.angularjs.org/guide/directive https://docs.angularjs.org/guide/directive
How to prevent that a scope is shared among directives n Angular? 如何防止范围在Angular指令之间共享?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.