[英]How to get checked checkbox value and store it array variable in angularjs?
我创建了数组列表并将其列为多个复选框。 从那个,如果我选择我存储到数组变量,如果我取消选中它需要从数组中删除。 我试过这是有效的,但取消检查值不是从数组变量中删除。
这是我下面的代码和jsfiddle
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>
脚本
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);
};
});
您可以在ngChange
中传递数据,您需要决定是否要推送或拼接。
HTML
<lable ng-repeat="list in lists">
<input type="checkbox" ng-model="active" ng-change="change(list, active)" >
</lable>
脚本
$scope.change = function(list, active){
if (active)
$scope.lst.push(list);
else
$scope.lst.splice($scope.lst.indexOf(list), 1);
};
请注意,每个项目的当前值存储在隔离范围上的active
变量中。 如果您需要模型中的值,只需绑定如下:
<lable ng-repeat="list in lists">
<input type="checkbox" ng-model="list.active" ng-change="change(list, active)" >
</lable>
使用数组的推送和弹出
而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);
}
};
希望它有帮助:)
我还以不同的方式为您的问题创建了一个解决方案。 我做的比你的简单。 这可能对你有所帮助。 检查下面的示例代码:
app.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
<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>
首先我假设你的list的synthax是不正确的,因为你应该有list s :
$scope.lists = [
{'vl' : 1},
{'vl' : 2},
{'vl' : 3},
{'vl' : 4},
{'vl' : 5},
];
然后,这是不必要的: $scope.lst = {};
因为你可以影响列表中每个项目的模型,如:
<input type="checkbox" name="chk[]" ng-model="item.lst" value="{{list.vl}}" ng-change="change()">
注意将更新yout列表模型的Item.lst。
经过多次改变,您将拥有:
$scope.lists = [
{'vl' : 1, 'lst' : value},
{'vl' : 2, 'lst' : value},
{'vl' : 3, 'lst' : value},
{'vl' : 4, 'lst' : value},
{'vl' : 5, 'lst' : value},
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.