Angular JS checkbox is not working

Question

Am breaking my head from 2 hours. Since am new to angular JS.

I have following checkbox and I want checked checkbox value pushed to an array. If I unchecked it should pop out from an array. I tried following code. But not working...

    <label ng-repeat="r in MessageUserList">
    <input type="checkbox" name="selectList[]" value="{{r}}"
    ng-checked="selection.indexOf(r) > -1" ng-click="toggleSelection(r)"> 
{{r.member.first_name}}</label>

MessageUserList JSON comming from web service as :

{  
   "member":{  
      "member_id":8,
      "first_name":"Mr. David",
      "last_name":"Raz",
      "phone":122,
      "password":"dd",
      "mail":"[email protected]",
      "system_date":"May 18, 2017 3:26:01 PM",
      "society_id":1,         
   },
   "flat_assign":"N"
}

In my controller :

var selection=[];
 // Toggle selection for a given r by name
  $scope.toggleSelection = function toggleSelection(r) {
    var idx = $scope.selection.indexOf(r); //Error here indexOf(r)

    // Is currently selected
    if (idx > -1) {
        alert("Same checked");
      $scope.selection.splice(idx, 1);
    }

    // Is newly selected
    else {
        alert("New checked");
        $scope.selection.push(r);
        alert(JSON.stringify(selection));
    }
  }

Am getting error: TypeError: Cannot read property 'indexOf' of undefined at b.toggleSelection (controllers.js:129)

Is your $scope.selection instantiated in your controller or somewhere else in your code ? — Radouane ROUFID
– Radouane ROUFID, Commented May 23, 2017 at 8:29
change var selection=[]; to $scope.selection=[]; may help. :) — Pengyy
– Pengyy, Commented May 23, 2017 at 8:30
As @Pengyy mentionned, you have to declare it within you $scope. Please refer to Pengyy comment. — Radouane ROUFID
– Radouane ROUFID, Commented May 23, 2017 at 8:37

Saurabh Agrawal · Accepted Answer · 2017-05-23 08:45:15Z

1

Try this,

<!DOCTYPE html>
<html>
<head>
    <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('surveyController', function($scope){
          $scope.MessageUserList =          [{  
           "member":{  
              "member_id":8,
              "first_name":"Mr. David",
              "last_name":"Raz",
              "phone":122,
              "password":"dd",
              "mail":"[email protected]",
              "system_date":"May 18, 2017 3:26:01 PM",
              "society_id":1,         
          },
          "flat_assign":"N"
      }];

      $scope.selection = [];
 // Toggle selection for a given r by name
 $scope.toggleSelection = function toggleSelection(r) {
    var idx = $scope.selection.indexOf(r); //Error here indexOf(r)

    // Is currently selected
    if (idx > -1) {
        alert("Same checked");
        $scope.selection.splice(idx, 1);
    }

    // Is newly selected
    else {
        alert("New checked");
        $scope.selection.push(r);
        alert(JSON.stringify($scope.selection));
    }
}
});


</script>
</head>
<body ng-controller="surveyController" ng-app="myApp">
   <label ng-repeat="r in MessageUserList">
    <input type="checkbox" name="selectList[]" value="{{r}}"
    ng-checked="selection.indexOf(r) > -1" ng-click="toggleSelection(r)"> 
    {{r.member.first_name}}</label>
</body>
</html>

answered May 23, 2017 at 8:45

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

1 Comment

Saurabh Agrawal Over a year ago

I changed var selection=[]; to $scope.selection=[]; and changed same in alert also :)

Sergaros · Accepted Answer · 2017-05-23 08:37:46Z

0

use something like this:

//html

<label>Check me to check both: <input type="checkbox" ng-model="ch" ng-changed="saveChange()"></label>
<br/>
{{ch}}

//js

.controller('yourCtrl', function($scope){
    $scope.ch = false;
    $scope.selection=[];
    $scope.saveChange = ()=>{
         $scope.selection.push(ch);
    }
})

answered May 23, 2017 at 8:37

Sergaros

8411 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular JS checkbox is not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related