angularjs checkall 和 checkbox 被选中时压入并拼接成数组

Question

我正在尝试基于 checkall 推送和拼接元素，单击单个复选框，我的问题是我从 angularjs post 请求中获取列表并使用 [=14= 显示它] 我已规定在新列中输入一些文本以及 ng-repeat 数据。现在基于用户选择的 checkall 或单击的单个复选框，我将数据推送到数组中。在这里，当用户单击单个复选框时，我能够推送数据，但是当用户单击 chekall 复选框 0 和 1 时，我将推送数组而不是文本框值。任何帮助将不胜感激。

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 模型不是来自 RosList。

Answer 1

如果我对问题的理解正确，我认为解决方案会简单得多。主要的混淆是，不仅只有一个 "source of truth" - 你为每一行保留一个状态，并且 also 所有 do_ro_no's.

我建议只跟踪每一行并在需要时计算 arrayToPost。

像这样：

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>

数组是 getTruckNo() 的结果，如您在代码段中所见。

Answer 2

您应该在您的控制器中将 truck_no 初始化为 $scope.truck_no = [] 以便访问这些值，并在您的 $scope.toggleCheckAll 函数中将 $scope.modifyArrayToPost(user, truckno); 更改为 $scope.modifyArrayToPost(user, $scope.truck_no[truckno]);

编辑：我稍微修改了您的代码以处理所有情况。

演示：https://next.plnkr.co/edit/DnzsCFkPQU8ByFZ8

angularjs checkall 和 checkbox 被选中时压入并拼接成数组

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

angularjs

checkbox

angularjs-ng-repeat