Push and splice into array when checkall and checkbox is checked in angularjs

Question

I am trying to push and splice the elements based on checkall, single checkbox clicked, my problem is I am getting a list from angularjs post request and displayed it using ng-repeat I have given provision to enter some text in a new column along with ng-repeat data. Now based on the user selection of checkall or single checkbox clicked I am pushing the data into array. Here I am able to push the data when the user clicked on single checkbox, but when the user clicked on chekall checkbox 0, 1 are pushing the array instead of textbox value. Any help will be greatly appreciated.

Html

<table class='reportstd' align='center' width='80%'> <tr class='trdesign'> <td> <input type="checkbox" name="checkAll" id="all" data-ng-model="checkedAll" data-ng-change="toggleCheckAll()" /> </td> <td> Sl No</td> <td> RO No.</td> <td> Truck No.</td> </tr> <tr data-ng-repeat="user in RosList"> <td> <input type="checkbox" value="{{user.do_ro_no}}" data-ng-model="user.checked" data-ng-change="modifyArrayToPost(user,truck_no[$index])" /> </td> <td>{{$index + 1}}</td> <td>{{user.do_ro_no}}</td> <td><input type='text' data-ng-model="truck_no[$index]" id="truck_no_{{$index}}" name="truck_no_{{$index}}" value=""></td> </tr> </table> <table> <tr> <td colspan='2'><input type="submit" id="btn_submit" name='sea' value='Search' data-ng-submit="postROs(arrayToPost)" /></td> </tr> </table> 

Angularjs

$scope.arrayToPost = []; $scope.toggleCheckAll = function() { if ($scope.checkedAll) { angular.forEach($scope.RosList, function(user, truckno) { user.checked = true; $scope.modifyArrayToPost(user, truckno); }); } else { angular.forEach($scope.RosList, function(user, truckno) { user.checked = false; $scope.modifyArrayToPost(user, truckno); }); } } $scope.modifyArrayToPost = function(user, truckno) { if (user.checked && truckno != null && $scope.arrayToPost.indexOf(user.do_ro_no) == -1) { $scope.arrayToPost.push(user.do_ro_no, truckno); } else if (!user.checked) { $scope.arrayToPost.splice($scope.arrayToPost.indexOf(user.do_ro_no, truckno), 2); } } $scope.$watch('RosList', function() { var allSet = true; var allClear = true; angular.forEach($scope.RosList, function(user, truckno) { if (user.checked) { allClear = false; } else { allSet = false; } }); var checkAll = $element.find('#all'); checkAll.prop('indeterminate', false); if (allSet) { $scope.checkedAll = true; } else if (allClear) { $scope.checkedAll = false; } else { $scope.checkedAll = false; checkAll.prop('indeterminate', true); } }, true); 

$scope.RosList = [ {do_ro_no: "217PALV000201898", slno: 1, }, {do_ro_no: "317PALV000201898", slno: 2, } ] 

truck_no model is not coming from RosList.

Answer 1

You should initialize truck_no in your controller as $scope.truck_no = [] in order to access the values, and in your $scope.toggleCheckAll function change $scope.modifyArrayToPost(user, truckno); to $scope.modifyArrayToPost(user, $scope.truck_no[truckno]);

EDIT: I've slightly modified your code to handle all cases.

Demo: https://next.plnkr.co/edit/DnzsCFkPQU8ByFZ8

Answer 2

If I understand the issue correctly, I think that the solution is much simpler. The main confusation is that there is not just only one "source of truth" - you hold a state for each row and also all the do_ro_no's.

I suggest to keep track only for each row and calculate the arrayToPost whenever you need.

Like this:

angular.module('app', []).controller('ctrl', ($scope, $element) => { $scope.truck_no = []; $scope.RosList = [{ do_ro_no: "217PALV000201898", slno: 1, }, { do_ro_no: "317PALV000201898", slno: 2, } ]; $scope.getTruckNo = () => { return $scope.truck_no.filter((t, index) => { return $scope.RosList[index].checked; }); } $scope.getArrayToPost = () => { return $scope.RosList .filter(ros => ros.checked) .map(ros => ros.do_ro_no); } $scope.arrayToPost = []; $scope.toggleCheckAll = function() { if ($scope.checkedAll) { //angular.forEach($scope.RosList, function(user, truckno) { // user.checked = true; // $scope.modifyArrayToPost(user, truckno); //}); $scope.RosList.forEach(ros => ros.checked = true); } else { //angular.forEach($scope.RosList, function(user, truckno) { // user.checked = false; // $scope.modifyArrayToPost(user, truckno); //}); $scope.RosList.forEach(ros => ros.checked = false); } } //$scope.modifyArrayToPost = function(user, truckno) { // if (user.checked && truckno != null && $scope.arrayToPost.indexOf(user.do_ro_no) == -1) { // $scope.arrayToPost.push(user.do_ro_no, truckno); // } else if (!user.checked) { // $scope.arrayToPost.splice($scope.arrayToPost.indexOf(user.do_ro_no, truckno), 2); // } //} //$scope.$watch('RosList', function() { // var allSet = true; // var allClear = true; // angular.forEach($scope.RosList, function(user, truckno) { // if (user.checked) { // allClear = false; // } else { // allSet = false; // } // }); // // var checkAll = $element.find('#all'); // checkAll.prop('indeterminate', false); // if (allSet) { // $scope.checkedAll = true; // } else if (allClear) { // $scope.checkedAll = false; // } else { // $scope.checkedAll = false; // checkAll.prop('indeterminate', true); // } //}, true); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table class='reportstd' align='center' width='80%'> <tr class='trdesign'> <td> <input type="checkbox" name="checkAll" id="all" data-ng-model="checkedAll" data-ng-change="toggleCheckAll()" /> </td> <td> Sl No</td> <td> RO No.</td> <td> Truck No.</td> </tr> <tr data-ng-repeat="user in RosList"> <td> <input type="checkbox" value="{{user.do_ro_no}}" data-ng-model="user.checked" data-ng-change="modifyArrayToPost(user,truck_no[$index])" /> </td> <td>{{$index + 1}}</td> <td>{{user.do_ro_no}}</td> <td><input type='text' data-ng-model="truck_no[$index]" id="truck_no_{{$index}}" name="truck_no_{{$index}}" value=""></td> </tr> </table> <table> <tr> <td colspan='2'><input type="submit" id="btn_submit" name='sea' value='Search' data-ng-submit="postROs(arrayToPost)" /></td> </tr> </table> <pre> {{getTruckNo() | json}} </pre> </div>

The array is the result of getTruckNo() as you can see in the snippet.