Peterson February 2016

Alert all checkboxes that are checked in ng-Repeat : AngularJS

I have a small program where I have 3 checkboxes. I may check any or all of the checkboxes. I will need to alert the names of the People infront of whose id I have checked the checkboxes.

HTML:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="(key,x) in People">
        <td><input type="checkbox" id="{{x.id}}" >{{x.name}}</td>
    </tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.checkboxArray = [];
    $scope.People = [
        {name:"Peter",id:"201"},
        {name:"Lina",id:"202"},
        {name:"Roger",id:"203"}
    ];
    //alert function 
    $scope.alert = function(){
        angular.forEach($scope.People, function(val,key) {
            if('#val.id:checked'){
                $scope.checboxArray + = $scope.People[key].name;
            }
            alert($scope.checkboxArray);
        }
    }

});
</script>
</body> 
</html>

I am not sure if I am putting the condition properly inside if() condition. Can someone help?

Answers


Arun P Johny February 2016

You need to store the checked status using ng-model like below then find the checked items using the People array

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.checkboxArray = [];
  $scope.People = [{
    name: "Peter",
    id: "201"
  }, {
    name: "Lina",
    id: "202"
  }, {
    name: "Roger",
    id: "203"
  }];
  //alert function 
  $scope.alert = function() {
    var selected = $scope.People.filter(function(item) {
      return item.checked
    }).map(function(item) {
      return item.name;
    })
    alert(selected);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <table>
      <tr ng-repeat="(key,x) in People">
        <td>
          <input ng-model="x.checked" type="checkbox" id="{{x.id}}">{{x.name}}</td>
      </tr>
    </table>
    <button ng-click="alert()">Click</button>
    <pre>{{People}}</pre>
  </div>
</div>


Zonedark February 2016

Here's a working JSFIDDLE for your problem.

As Arun mentionned, the easiest way is to get the checked value using ng-model.

I updated your previous code and added my solution :

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="x in People">
     <td>
             <input type="checkbox" ng-model="x.checked" id="{{x.id}}" >{{x.name}}<br/> 
     </td>

    </tr>
</table>
<button ng-click="doAction()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.People = [
        {name:"Peter",id:"201", checked:"false"},
        {name:"Lina",id:"202", checked:"false"},
        {name:"Roger",id:"203", checked:"false"}
    ];
    $scope.doAction = function() {
        for(var x = 0;x < $scope.People.length;x++)
        {
            if ($scope.People[x].checked == true)
            alert($scope.People[x].name);
        }
    }
});
</script>
</body> 
</html>


gr3g February 2016

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="(key,x) in People">
        <td><input type="checkbox" id="{{x.id}}" ng-model="x.checked">{{x.name}}</td>
    </tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.checkboxArray = [];
    $scope.People = [
        {name:"Peter",id:"201", checked : false},
        {name:"Lina",id:"202", checked : false},
        {name:"Roger",id:"203", checked : false}
    ];
    //alert function 
    $scope.alert = function(){
        angular.forEach($scope.People, function(val,key) {
            if(val.checked){
                $scope.checboxArray.push(val.name);
            } else{
               alert(val.name ," is not checked");
            }
        }
    }

});
</script>
</body> 
</html>

Post Status

Asked in February 2016
Viewed 3,438 times
Voted 7
Answered 3 times

Search




Leave an answer