How to get checked values from checkbox using Angular JS

Question

Am new to angular JS. I have following check box and the data is coming from web service:

 <label ng-repeat="r  in MedicalConditions track by $index">
    <input ng-model="ids[$index]" type="checkbox" ng-checked="r.value"> 
       {{r.conditions_name}}
    </label>

In console.log value is perfectly right as per my requirements. How to push value to an array i.e., arr[] and stringify it. I tried code like this..

//To fetch Medical Conditions List

$scope.parameter = "{}";
$scope.class0 = "{}";
$http.get('http://192.168.1.129:8080/apartment//member/medical/conditions/list').then(function(response) {
    $scope.MedicalConditions = response.data.list;
});

  $scope.$watchCollection('ids', function(newVal) {     
       $scope.parameter.class0 = $scope.ids;
    }); 


$scope.alertdata = function() {
    var parameter = {
        "first_name": $scope.first_name,

        "role": [{
            "role_id": 1,
            "name": "Admin",
            "details": "text"
        }],
        "associated": [{
            "associated_id": 1,
            "associated_name": "Parent",
            "primary_member_id": 1
        }],
        "class0": $scope.ids
    }
    parameter = JSON.stringify(parameter);

@Sinchan $scope.lists[] is assigned in my case data is coming from dynamically.. How to do in my case.. — Prashanth Harish
– Prashanth Harish, Commented Apr 24, 2017 at 6:30
Possible duplicate of How to get checkbox value in angularjs? — user7889392
– user7889392, Commented Apr 24, 2017 at 6:43
You should try binding dynamic Check boxes value using ng-model first . Then other things'll be easier to do. — Ananya
– Ananya, Commented Apr 24, 2017 at 6:47

Gaurav Srivastava · Accepted Answer · 2017-04-24 06:41:49Z

1

May be this will help:

angular.module('app', [])
  .controller('Controller', function($scope) {
  
  $scope.ids = {};
  $scope.arr = {};
  
  $scope.MedicalConditions = {};
  
  $scope.MedicalConditions[0] = {};
  $scope.MedicalConditions[0].value= true;
  $scope.MedicalConditions[0].conditions_name= 'first value';
  
  $scope.MedicalConditions[1] = {};
  $scope.MedicalConditions[1].value= false;
  $scope.MedicalConditions[1].conditions_name= 'seconde value';
   
    $scope.$watchCollection('ids', function(newVal) {     
       $scope.parameter.class0 = $scope.ids;
    });
    
    
    $scope.parameter = {};
    $scope.parameter.firstname = 'dummy name';
    $scope.parameter.class0 = $scope.ids;
    

  });

<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">


    <label ng-repeat="r  in MedicalConditions track by $index">
     <input ng-model="ids[$index]" type="checkbox" ng-checked="r.value" > {{ r.conditions_name}}
     </label>
  
  
  <br>
  
  Parameter: {{parameter}}


  </div>
</body>

</html>

edited Apr 24, 2017 at 6:41

answered Apr 24, 2017 at 6:33

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

9 Comments

Prashanth Harish Over a year ago

Thanks for the post. You have assigned values $scope.MedicalConditions[0].conditions_name= 'first value'; like that. But in my case the data is comming dynamically from web service. How to do it in my case.?

Gaurav Srivastava Over a year ago

@PrashanthHarish it was just to make the snippet work. you could assign the variable when u get the data via $http service.

Gaurav Srivastava Over a year ago

why you are trying to push the value into arr, you could get the value in ids model, as you can see in above working snippet

Prashanth Harish Over a year ago

TypeError: Cannot set property 'class0' of undefined. Error is comming...

Gaurav Srivastava Over a year ago

@PrashanthHarish it may be bacause you didn't initialize the parameter variable. you have to define it as an object for the first time.

|

Manikandan Velayutham · Accepted Answer · 2017-04-27 09:22:09Z

Try like below...

var app = angular.module('exApp',[]);

app.controller('ctrl', function($scope){
$scope.ids = [];
$scope.arr = [];
$scope.checkSelected = [];
$scope.MedicalConditions = [{"conditions_name":"xxz","conditions_id":"1"}, {"conditions_name":"yyz","conditions_id":"2"}, {"conditions_name":"zzz","conditions_id":"3"}];
$scope.$watchCollection('ids', function(newVal) {       
  for (var i = 0; i < newVal.length; ++i) {
    console.log(newVal[i]);
    $scope.arr.push(newVal[i]);       
}
});

$scope.checkAllR = function () {
            $scope.checkAll = !$scope.checkAll;

            if ($scope.checkAll) {
                $scope.checkSelected = [];
                angular.forEach($scope.MedicalConditions, function (checkR) {                   
                   
                        checkR.check = $scope.checkAll;
                        $scope.checkSelected.push(checkR);
                   
                });
            }
            else {
               $scope.checkSelected = [];
                angular.forEach($scope.MedicalConditions, function (checkR) {
                    var idx = $scope.checkSelected.indexOf(checkR);
                    checkR.check = $scope.checkAll;
                    $scope.checkSelected.splice(idx, 1);
                });
            }
        };

$scope.addChecked = function (checked) {
            if ($scope.checkSelected == undefined || $scope.checkSelected == null) {
                $scope.checkSelected = [];
            }

            var idx = $scope.checkSelected.indexOf(checked);

            // delete if exists
            if (idx > -1) {
                $scope.checkSelected.splice(idx, 1);
                checked.check = false;
            }
                // add
            else {
                $scope.checkSelected.push(checked);
                checked.check = true;               
            }       
$scope.checkAll = $scope.checkSelected.length == $scope.MedicalConditions.length ? true : false;
        };
var parameter = {
   "first_name": $scope.first_name,
   "middle_name": $scope.middle_name,
   //"class0": /*stringified data i.e., arr[] */ 
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
 Select All : <input type="checkbox" name="checkbox" value="1" ng-checked="checkAll" ng-click="checkAllR()"><br>
<label ng-repeat="r  in MedicalConditions">
<input type="checkbox" name="checkbox" class="check-nolabel" value="1" ng-checked="r.check" ng-click="addChecked(r)"> {{ r.conditions_name}}
 </label><br><br>
 {{checkSelected}}
 </body>

anilCSE · Accepted Answer · 2017-04-24 09:44:49Z

0

Hope this helps.

<div ng-app="myApp" ng-controller="MyCtrl">
    <label ng-repeat="r in MedicalConditions track by $index">
    <input ng-model="ids[$index]" 
      ng-init="ids[$index] = r.value"
      type="checkbox"> 
    {{r.condition}}
  </label>
</div>

And here is your controller.

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    $scope.ids = [];

    $scope.MedicalConditions = [{
    _id: 1,
    value: true,
    condition: 'Condition 1'
  }, {
    _id: 2,
    value: false,
    condition: 'Condition 2'
  }, {
    _id: 3,
    value: true,
    condition: 'Condition 3'
  }];
});

JsFiddle

answered Apr 24, 2017 at 9:44

anilCSE

2,4613 gold badges25 silver badges29 bronze badges

1 Comment

Prashanth Harish Over a year ago

Thanks for your post. I solved by my self for this query..:)

Prashanth Harish · Accepted Answer · 2017-04-25 05:11:37Z

<label ng-repeat="r  in MedicalConditions track by $index">
<input ng-model="ids[$index]" type="checkbox" ng-change="valCh(r)"> {{r.conditions_name}}
</label>

Controller code will look like this :

var postApp = angular.module('EntityApp', []);
postApp.controller('EntityAppCntroller', function($scope, $http, $window, $timeout, $location) {

    //To fetch Medical Conditions List    
        $http.get('http://111.222.444:8080/apartment//member/medical/conditions/list').then(function(response) {
            $scope.MedicalConditions = response.data.list;
        });
        var list = [];
        $scope.valCh = function(value) {
            list.push(value);
            JSON.stringify(list);
        }

        $scope.alertdata = function() {
            var parameter;
            parameter = {
                "parameter": {
                    "first_name": $scope.first_name,
                    "medicalconditions": list
                }
            }
            $http({
                url: 'http://111.222.333:8080/apartment//save/member/details',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(parameter)
            }).success(function(data, status) {
                if (data.status == 'success') {
                    alert("User Created");
                    $location.reload();
                } else if (data.status == 'failure') {
                    alert("Some failure please try again later !!!");
                }
            });
        };
    });

Collectives™ on Stack Overflow

How to get checked values from checkbox using Angular JS

4 Answers 4

9 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related