Clever Geek Handbook

How to get ng-repeat checkbox values ​​for submit function in angularjs

I have a form that has 10 checkboxes. By default angular js triggers in a separate checkbox. I want to capture all selected checkboxes in a submit action. Here is my code ...

<form name="thisform" novalidate data-ng-submit="booking()">
    <div ng-repeat="item in items" class="standard" flex="50">
        <label>
            <input type="checkbox"  ng-model="typeValues[item._id]" value="{{item._id}}"/>
            {{ item.Service_Categories}}
        </label>
    </div>
    <input type="submit" name="submit" value="submit"/>
</form>

      

        
        
        
      

    
$scope.check= function() { 
    //console.log("a");
    $http.get('XYZ.com').success(function(data, status,response) { 
    $scope.items=data;
});

$scope.booking=function(){
    $scope.typeValues = [];
    console.log($scope.typeValues);
}

I am getting an empty array.

Can anyone tell me how to capture all selected checkboxes just to send the event.

+3


source to share


4 answers 


<div ng-repeat="item in items">
    <input type="checkbox" ng-model="item.SELECTED"  ng-true-value="Y" ng-false-value="N"/>
</div>
<input type="submit" name="submit" value="submit" ng-click="check(items)"/>

$scope.check= function(data) { 
    var arr = [];
    for(var i in data){
       if(data[i].SELECTED=='Y'){
           arr.push(data[i].id);
       }
    }
    console.log(arr);
    // Do more stuffs here
}


+4


source


May I suggest reading the answer I posted yesterday to a similar StackOverflow question.

AngularJS with checkboxes

This displayed several checkboxes and then bound them to an array, so we always know which of the fields were currently checked.



enter image description here

And yes, you could ignore the contents of this bound variable until the submit button is clicked if you like.

+1


source


As per your code, all checkbox values ​​will be available in the typeValues ​​array. You can use something like this in your submit function:

$scope.typeValues

If you want to access the value of the 3rd checkbox, you need to do this:

var third = $scope.typeValues[2];
0


source


Declare your array ng-model

as in controller like

$scope.typeValues = [];

And in your template use

ng-model="typeValues[item._id]"

And in your controller, you get this model array values

in terms of 0

and 1

. You can iterate over there.

0


source






More articles:


All Articles