How to get checked checkbox value and store it array variable in angularjs?

Question

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

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); }; }); 

Answer 1

You can pass data in ngChange that you need to decide if you want to push or splice.

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 active on the isolated scope. If you need the value in your model, just bind likes this:

<lable ng-repeat="list in lists"> <input type="checkbox" ng-model="list.active" ng-change="change(list, active)" > </lable> 

https://jsfiddle.net/ruzw4Lfb/8/

Answer 2

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

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> 

Answer 3

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).

<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); } }; 

Fiddle

Hope it help :)

Answer 4

first I assume taht you synthax of list is incorrect, as you should have lists:

 $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 :

 <input type="checkbox" name="chk[]" ng-model="item.lst" value="{{list.vl}}" ng-change="change()"> 

note Item.lst that will update yout lists model.

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}, ];