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