In this case I want to create select all method using angular model. I have list of object and show it on my jsp on table. Here is snap of my jsp code.
<div ng-controller="historyController"> <div style="margin-bottom: 10px;vertical-align: middle"> <input ng-click="selectAllAct()" type="checkbox" /> Select All Transactions </div> <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="exampleone"> <thead> <tr> <th width="10%">Transaction Time</th> <th width="10%">Debit</th> <th width="10%">Credit</th> <th width="10%">Description</th> <th width="5%">Action</th> </tr> </thead> <tbody> <tr ng-repeat="trx in $parent.trxListFilter = (hisTrxList|filter:trxFilter) | startFrom:$parent.currentPage * $parent.dataPerPage | limitTo:$parent.dataPerPage | orderBy: trxTime" repeat-done="numberOfPages()"> <td width="10%">{{trx.trxTime| date: "dd MMMM yyyy HH:mm:ss"}}</td> <td width="10%">{{trx.dbAmount| currency:"Rp "}}</td> <td width="10%">{{trx.crAmount| currency:"Rp "}}</td> <td width="10%">{{trx.txDesc}}</td> <td width="5%"><input type="checkbox" class="checkbox" ng-model="trx.isProcess" ng-true-value="T" ng-false-value="F"/></td> </tr> </tbody> </table> </div>
Here is my javascript code.
showApp.controller('historyController', ['$scope', '$http', 'localStorageService', function($scope, $http, localStorageService) { $scope.hisTrxList = null; $scope.selectAll = false; $scope.getHistoryList = function() { //some method to get list of history trx }; $scope.selectAllAct = function() { $scope.selectAll = !$scope.selectAll; console.log($scope.selectAll); if ($scope.hisTrxList != null && $scope.hisTrxList.length > 0) { angular.forEach($scope.hisTrxList, function(trx, Key) { trx.isProcess = $scope.selectAll?"T":"F"; }); } }; $scope.getHistoryList(); }]);
Hope this simple article can help 🙂