how to get ng-repeat checkbox values on submit function in angularjs

Question

I have a form which has 10 checkboxes. By default angular js triggers on individual checkbox. I want to grab all selected check box values on submit action only. 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 empty array.

Can somebody tell how to grab all selected checkbox values only on submit event.

Vijayabaskaran M · Accepted Answer · 2015-06-23 10:58:19Z

4

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

answered Jun 23, 2015 at 10:58

Vijayabaskaran M

6136 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

its me Over a year ago

actually im new to angularjs .i am getting error like this Error: [ngModel:constexpr] errors.angularjs.org/1.3.13/ngModel/… at Error (native) at ajax.googleapis.com/ajax/libs/angularjs/1.3.13/…

its me Over a year ago

script> angular.module('info', []) .controller('FormController', ['$scope','$http','$window','$location', function($scope,$http,$window,$location,$stateProvider) { $scope.selected = []; $scope.items = [{id:1},{id:2}]; $scope.check= function(data) { var arr = []; for(var i in data){ if(data[i].SELECTED=='Y'){ arr.push(data[i].id); } } console.log(arr); $scope.selected = arr; // Do more stuffs here } }]);my controller i am getting same error ngModel:constexpr

Vijayabaskaran M Over a year ago

Try Using ng-true-value="'Y'" ng-false-value="'N'" in html

its me Over a year ago

<input type="checkbox" ng-model="item.SELECTED" ng-true-value="'Y'" ng-false-value="'N'"/>{{item}} it's working for me thanks

its me Over a year ago

how can i pass data to mongodb like this ['Wash', 'Tyres', 'Spares', 'Accessories'];

Community · Accepted Answer · 2017-05-23 10:31:09Z

1

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

AngularJS with checkboxes

This displayed a few checkboxes, then bound them to an array, so we would always know which of the boxes were currently checked.

enter image description here

And yes, you could ignore the contents of this bound variable until the submit button was pressed, if you wanted to.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jun 23, 2015 at 10:54

Mike Gledhill

29.4k8 gold badges160 silver badges162 bronze badges

Comments

Sidharth Panwar · Accepted Answer · 2015-06-23 10:52:28Z

0

As per your code all the checkboxes 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 3rd checkbox then you need to do this:

var third = $scope.typeValues[2];

answered Jun 23, 2015 at 10:52

Sidharth Panwar

4,6646 gold badges31 silver badges36 bronze badges

Comments

Vineet · Accepted Answer · 2015-06-23 10:53:42Z

0

Declare your ng-model as array in controller, like

$scope.typeValues = [];

And in your template, please use

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

And in your controller, you will get this model array values in terms of 0 and 1. You can iterate over there.

answered Jun 23, 2015 at 10:53

Vineet

4,7153 gold badges25 silver badges42 bronze badges

3 Comments

its me Over a year ago

i am getting empty array

Vineet Over a year ago

Are you getting an array with total items, which you had in items object ?

its me Over a year ago

i am getting total length

Collectives™ on Stack Overflow

how to get ng-repeat checkbox values on submit function in angularjs

4 Answers 4

5 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related