javascript 如何获取选中的复选框值并将其存储在 angularjs 中的数组变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31185554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get checked checkbox value and store it array variable in angularjs?
提问by s1lam8u
I have created array list and listing it as multiple check box. From that if i select i'm storing into the array variable and if I uncheck its need to be remove from array. I tried this is working for but while uncheck value is not removing from the array variable.
我创建了数组列表并将其列为多个复选框。从那以后，如果我选择我将存储到数组变量中，如果我取消选中它需要从数组中删除。我试过这是有效的，但取消选中值不会从数组变量中删除。
Here is my code below and jsfiddle
这是我下面的代码和jsfiddle
HTML
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<lable ng-repeat="list in lists">
<input type="checkbox" name="chk[]" ng-model="lst" value="{{list.vl}}" ng-change="change()">
{{list.vl}} <br>
</lable>
</div>
SCRIPT
脚本
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope){
$scope.lists = [
{'vl' : 1},
{'vl' : 2},
{'vl' : 3},
{'vl' : 4},
{'vl' : 5},
];
$scope.lst = [];
$scope.change = function(){
$scope.lst.push('2');
console.log($scope.lst);
};
});
回答by hansmaad
You can pass data in ngChangethat you need to decide if you want to push or splice.
您可以传递数据ngChange，您需要决定是否要推送或拼接。
HTML
HTML
<lable ng-repeat="list in lists">
<input type="checkbox" ng-model="active" ng-change="change(list, active)" >
</lable>
SCRIPT
脚本
$scope.change = function(list, active){
if (active)
$scope.lst.push(list);
else
$scope.lst.splice($scope.lst.indexOf(list), 1);
};
Note that the current value for each item is stored in a variable activeon the isolated scope. If you need the value in your model, just bind likes this:
请注意，每个项目的当前值存储在active隔离作用域的变量中。如果您需要模型中的值，只需像这样绑定：
<lable ng-repeat="list in lists">
<input type="checkbox" ng-model="list.active" ng-change="change(list, active)" >
</lable>
回答by squiroid
Use push and pop of array
使用数组的推送和弹出
While change() send two values first is it selected which is provided by ng-model and second the value you want to push or slice(remove).
虽然 change() 首先发送两个值，它是由 ng-model 提供的，其次是您要推送或切片（删除）的值。
<input type="checkbox" name="chk[]" ng-model="lst" value="{{list.vl}}" ng-change="change(lst,list.vl)">
$scope.change = function(check,value){
if(check){
$scope.lst.push(value);
}else{
$scope.lst.splice($scope.lst.indexOf(value), 1);
}
};
Hope it help :)
希望它有帮助:)
回答by hsynlms
I also created a solution for your problem in a different way. I made something simple than yours. This may help you. Check the example code below:
我还以不同的方式为您的问题创建了一个解决方案。我做了一些比你简单的东西。这可能对你有帮助。检查下面的示例代码：
app.js
应用程序.js
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope){
$scope.lists = [
{'vl' : 1, 'state' : false},
{'vl' : 2, 'state' : false},
{'vl' : 3, 'state' : false},
{'vl' : 4, 'state' : false},
{'vl' : 5, 'state' : false}
];
$scope.change = function(id){
$scope.lists[id].state = !$scope.lists[id].state;
console.log($scope.lists);
};
});
index.html
索引.html
<div ng-app="myApp" ng-controller="MyCtrl">
<lable ng-repeat="list in lists">
<input type="checkbox" value="{{list.vl}}" ng-click="change($index)">
{{list.vl}} <br>
</lable>
</div>
回答by aorfevre
first I assume taht you synthax of list is incorrect, as you should have lists:
首先，我假设你的 list 合成不正确，因为你应该有 list s：
$scope.lists = [
{'vl' : 1},
{'vl' : 2},
{'vl' : 3},
{'vl' : 4},
{'vl' : 5},
];
Then, this is unecessary : $scope.lst = {};as you can affect the model of each item of your list like :
然后，这是不必要的： $scope.lst = {};因为您可以影响列表中每个项目的模型，例如：
<input type="checkbox" name="chk[]" ng-model="item.lst" value="{{list.vl}}" ng-change="change()">
note Item.lst that will update yout lists model.
注意 Item.lst 将更新您的列表模型。
after several change you will have :
经过几次更改后，您将拥有：
$scope.lists = [
{'vl' : 1, 'lst' : value},
{'vl' : 2, 'lst' : value},
{'vl' : 3, 'lst' : value},
{'vl' : 4, 'lst' : value},
{'vl' : 5, 'lst' : value},
];
