Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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);
    };
});
share|improve this question
up vote 2 down vote accepted

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/

share|improve this answer
    
How to get value of the index? – s1lam8u Jul 2 '15 at 13:28
    
@Silambu $index is magic of ngRepeat. docs.angularjs.org/api/ng/directive/ngRepeat I am not sure what you want to store in the array. In my example I pushed the $index. I guess that's not what you really want, but it' s very unclear from your question. – hansmaad Jul 2 '15 at 13:31
    
Don't rely on $index because it will not work while applying filter on ng-repeat. Just for info ;) – squiroid Jul 2 '15 at 13:43
    
@squiroid You're right. I think it's better to just pass the information to change that is actually needed. I didn't really understand his intention from the question. – hansmaad Jul 2 '15 at 14:21
    
@Silambu Updated answer and fiddle – hansmaad Jul 2 '15 at 14:33
up vote 1 down vote

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>
share|improve this answer
    
But you are forcing me to add state!!! Which I don't want to do!!! – s1lam8u Jul 2 '15 at 15:04
up vote 1 down vote

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

share|improve this answer
    
This is simple and less line of code! Thanks – s1lam8u Jul 2 '15 at 13:37
    
@Silambu You will not need the value="{{list.vl}}" anymore. Just remove it and your code will be more a lot cleaner. – Alberto I.N.J. Jul 2 '15 at 13:39
    
@AlbertoI.N.J. Ok thanks! – s1lam8u Jul 2 '15 at 13:50
    
@Silambu Your welcome. – Alberto I.N.J. Jul 2 '15 at 13:52
    
Sorry to say! I selected all check box from that if I uncheck second check box it is not removing second check box value from that array. I need to remove unchecked check box value from the array. – s1lam8u Jul 2 '15 at 14:00
up vote 0 down vote

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},
            ];
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.