All geek questions in one place

Calling all checkbox events when selecting checkall in angularjs

<table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th> <th> Name </th> </thead> <tr ng-repeat="x in items"> <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)" /></td> <td>{{x.name}}</td> </tr> </tr> </table>

How can I get all item.id when I click on the selectall () flag?

Also, can you suggest me the appropriate ng model syntax for the ng-repeat flag?

Thank you Raja K

0
source share
3 answers

Dear

Here it is just help ref. to your question. I gave a script to select all the records . Therefore, modify it as you wish.

 <button ng-click="selectAll()">select all</button> <div ng-repeat="item in items"> <label> {{item.n}}: <input type="checkbox" ng-model="selected[item.id]"> </label> </div>

And in the controller, just set all elements to true:

 $scope.selected = {}; $scope.selectAll = function(){ for (var i = 0; i < $scope.items.length; i++) { var item = $scope.items[i]; $scope.selected[item.id] = true; } };

Thanks and greetings

0
source

Take a look at this example, you will see how the values ​​of the checkbox change,

when using a checkbox use ng-change instead of ng-click

 // the main (app) module var myApp = angular.module("myApp", []); // add a controller myApp.controller("myCtrl", function($scope) { $scope.value1 = "NO"; $scope.items = [{ id: 1, check: "NO", name: "A" }, { id: 2, check: "NO", name: "B" }, { id: 3, check: "NO", name: "C" }, { id: 4, check: "NO", name: "D" }, { id: 5, check: "NO", name: "E" }, { id: 6, check: "NO", name: "F" }, { id: 7, check: "NO", name: "G" }, { id: 8, check: "NO", name: "H" }]; $scope.selectAll = function() { angular.forEach($scope.items, function(elem) { elem.check = $scope.value1; }) } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}} </th> <th>Name</th> </thead> <tbody> <tr ng-repeat="x in items"> <td> <input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}} </td> <td>{{x.name}}</td> </tr> </tbody> </table> </body>
0
source 

 var myapp = angular.module('app', []); myapp.controller('Ctrl', function ($scope) { var vm = this; vm.data = { items: [ {id:1,name:"ali",selected: "NO"}, {id:2,name:"reza",selected: "NO"}, {id:3,name:"amir",selected: "NO"} ] }; vm.value1 = false; vm.selectAll = function($event){ var checkbox = $event.target; var selected = "NO"; if(checkbox.checked) { selected = "YES"; } else { selected = "NO"; } angular.forEach(vm.data.items, function(item) { item.selected = selected; }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="Ctrl as vm"> <table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th> <th> All </th> </thead> <tr ng-repeat="x in vm.data.items"> <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)" /></td> <td>{{x.name}}</td> </tr> </table> </div>
0
source

Source: https://habr.com/ru/post/1245229/

More articles:


All Articles