[英]Limit checkbox selections and bind to an array in AngularJS
I am trying to achieve two things: 我正在努力实现两件事:
Bind an array to a list of checkboxes (just a string array), and 将数组绑定到复选框列表(只是一个字符串数组),然后
Limit the number of selections the user can make to a number between 1 and the number of available items less 1. 将用户可以进行的选择数量限制为1到可用项目的数量之间的乘以1。
I can get (2) to work until the user clicks the last item, at which point it loses track and the items remain selected. 我可以使(2)起作用,直到用户单击最后一个项目,这时它会失去跟踪,并且这些项目仍保持选中状态。
The interactive code is up here: http://codepen.io/adamcodegarden/pen/bdbQqe (forked from a similar example) 交互式代码在这里: http : //codepen.io/adamcodegarden/pen/bdbQqe (从类似的示例中派生)
My HTML/Angular code: 我的HTML /角度代码:
<p ng-repeat="item in allOptions" class="item" id="{{item}}">
{{item}} <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)"> Click this to sync this item with the target array. {{item}} Selected: {{bool}}
and the JS: 和JS:
var myApp = angular.module("myApp", []);
var maxItems = 1;
myApp.controller('myController', function($scope) {
$scope.isChecked = function(item){
var match = false;
for(var i=0 ; i < $scope.data.length; i++) {
if($scope.data[i] === item) {
match = true;
}
}
return match;
};
$scope.allOptions = [
'one', 'two', 'three', 'four'
];
$scope.data = [
];
$scope.sync = function(bool, item){
if (bool) {
// add item
$scope.data.push(item);
// if we have gone over maxItems:
if ($scope.data.length > maxItems) {
//remove oldest item
$scope.data.splice(0,1);
}
} else {
// remove item
for (var i=0 ; i < $scope.data.length; i++) {
if ($scope.data[i] === item){
$scope.data.splice(i,1);
}
}
}
};
});
I like plunker more than codepen. 我比起Codepen更喜欢节油器。 So I created this plunker
所以我创造了这个矮人
http://plnkr.co/edit/l8gxQHXBQdFeKIuwf3f0?p=preview
The main idea is that I format the original array as: 主要思想是将原始数组的格式设置为:
$scope.allOptions = [
{key: 'one'}, {key: 'two'}, {key: 'three'}, {key:'four'}
];
And slight change to the sync logic as well: 并且对同步逻辑也做了些微改动:
$scope.sync = function(bool, item){
if (bool) {
// add item
$scope.data.push(item);
// if we have gone over maxItems:
if ($scope.data.length > maxItems) {
//remove first item
$scope.data[0].checked = false;
$scope.data.splice(0,1);
}
} else {
// remove item
for (var i=0 ; i < $scope.data.length; i++) {
if ($scope.data[i] === item) {
$scope.data.splice(i,1);
}
}
}
}; };
Also change html portion: 还要更改html部分:
<p ng-repeat="item in allOptions" class="item" id="{{item.key}}">
{{item.key}} <input type="checkbox" ng-change="sync(item.checked, item)" ng-model="item.checked"> Click this to sync this item with the target array. {{item.key}} Selected: {{bool}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.