Implement Check All AngularJS

Question

Implement Check All AngularJS

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm trying to put in a page that loads a list of results, with a checkbox each, shown with AngularJS, a checkbox that when clicking, check all the checkboxes in the list. For this, I created this checkbox like this:

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" type="checkbox" onclick="checkAll();" />

Then I go through the variable that will store the Json that comes from the action (var JsonData)

<tr ng-repeat="item in data">
<input type="checkbox" ng-model="item.checked" class="sf_admin_batch_checkbox">

Finally I try to create a function so that it marks all, but I can not get it to work:

<script type="text/javascript">
function checkAll()
{

$scope.data = {};

$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });
}
}
</script>

The problem is that I do not know what to put in the $ scope.data

I do not know if I'm on the right track

Greetings. Thanks

I currently have the input

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" type="checkbox" onclick="checkAll();" />

and a script that has stopped working when modifying the input of the loop

<script type="text/javascript">
function checkAll()

{
  var boxes = document.getElementsByTagName('input'); for(var index = 0; index < boxes.length; index++) { box = boxes[index]; if (box.type == 'checkbox' && box.className == 'sf_admin_batch_checkbox') box.checked = document.getElementById('sf_admin_list_batch_checkbox').checked } return true;
    }
</script>

php angularjs

asked by Alex 29.09.2017 в 11:13

source

2 answers

Modify select in AngularJS + Laravel Netbeans does not recognize Cygwin

score 0 · Answer 1

Good! Can you try this way?

Instead of onclick we will use ng-change to run when the value changes.

HTML

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" 
type="checkbox" ng-model="selectedAll" ng-change="checkAll();" />

Then, we will go through our collection and depending on the value of the first check, we will activate or deactivate all checks.

CONTROLLER :

$scope.checkAll = function () {
    angular.forEach($scope.data, function (item) {
        item.selected = $scope.selectedAll;
    });
}

Regarding your $scope.data , it should be the collection to go through. Will your list have more than checkboxes?

Your data could be perfectly just an array of objects that are worth the Selected

$scope.data = [{selected:false},{selected:false},{selected:false}]

This way you will get 3 checks to false.

You can also add a selected value to your object collection

$scope.data = [{id:1, nombre: 'pedro', selected:false},{id:2, nombre: 'luis', 
selected:false},{id:3, nombre: 'marcos', selected:false}]

If your collection comes as a response to a call to the server, you can link it perfectly without creating the selected field, as the initial value, as it does not exist, will be false and when you activate the check it will create the attribute with the value of true.

I'll give you an example in codepen

score 0 · Answer 2

Try to traverse each element of the array and assign the model of checkbox to false :

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.model = {};
  $scope.model.items = [{text:"item1", selected : false }, {text:"item2", selected: 2}, {text:"item3", selected: false}, {text:"item4", selected: false}];
  
  $scope.model.checkAll = false;
  
  $scope.model.checkAllItems = function(item) {
     for(var i = 0; i < $scope.model.items.length;i++)
     {
        $scope.model.items[i].selected = $scope.model.checkAll;
     }
  }
});

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

<div ng-app="app" ng-controller="ctrl">

 <input type="checkbox" ng-model="model.checkAll" ng-change="model.checkAllItems()" /> seleccionar todo
 <ul ng-repeat="item in model.items">
  <li>
    <input type="checkbox" ng-model="item.selected" /> {{item.text}}
  </li>
 </ul>
</div>