Question

69

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

rated 0 times [ 71] [ 2] / answers: 1 / hits: 15317 / 9 Years ago, thu, july 2, 2015, 12:00:00

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

    };

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

answered 9 Years ago mustafaericho · Accepted Answer

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/