javascript - Angular 从 ng-repeat 外部选择所有复选框

Question

描述

我有一个小型产品订单系统，用户可以在其中添加订单行，并在每个订单行上添加一个或多个产品。 (我意识到不止一种产品出现在同一个订单行上是很不寻常的，但这是另一个问题)。

可以在每行上选择的产品基于产品层次结构。例如:

产品展示示例

T-Shirts
   V-neck
   Round-neck
   String vest

JSON 数据

$scope.products = [
{ 
  id: 1, 
  name: 'T Shirts', 
  children: [
    { id: 4, name: 'Round-neck', children: [] },
    { id: 5, name: 'V-neck', children: [] },
    { id: 6, name: 'String vest (exclude)', children: [] }
  ] 
},
{ 
  id: 2, 
  name: 'Jackets', 
  children: [
    { id: 7, name: 'Denim jacket', children: [] },
    { id: 8, name: 'Glitter jacket', children: [] }
  ] 
},
{ 
  id: 3, 
  name: 'Shoes', 
  children: [
    { id: 9, name: 'Oxfords', children: [] },
    { id: 10, name: 'Brogues', children: [] },
    { id: 11, name: 'Trainers (exclude)', children: []}
  ] 
}

];

T 恤不可选择，但 3 个子产品可以。

我要达到的目标

我想做的是有一个“全选”按钮，它会自动将三种产品添加到订单行。

第二个要求是，当按下“全选”按钮时，它会根据产品 ID 排除某些产品。我为此创建了一个“排除”数组。

我设置了一个 Plunker来说明购物车，以及我正在尝试做的事情。

到目前为止它可以:

• 添加/删除订单行
• 添加/删除产品
• 为部分中的所有产品添加“检查”，排除“exclusions”数组中的任何产品

问题

然而，尽管它在输入中添加了检查，但它不会触发输入上的 ng-change:

<table class="striped table">
    <thead>
      <tr>
        <td class="col-md-3"></td>
        <td class="col-md-6"></td>
        <td class="col-md-3"><a ng-click="addLine()" class="btn btn-success">+ Add order line</a></td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="line in orderHeader.lines">
        <td class="col-md-3">

          <ul>
            <li ng-repeat="product in products" id="line_{{ line.no }}_product_{{ product.id }}">

              {{ product.name }} <a ng-click="selectAll(product.id, line.no)" class="btn btn-primary">Select all</a>

              <ul>
               <li ng-repeat="child in product.children">
                 <input type="checkbox" 
                      ng-change="sync(bool, child, line)" 
                      ng-model="bool" 
                      data-category="{{child.id}}" 
                      id="check_{{ line.no }}_product_{{ child.id }}"
                      ng-checked="isChecked(child.id, line)">
              {{ child.name }}
               </li> 
              </ul>

            </li>
          </ul>
        </td>
        <td class="col-md-6">
          <pre style="max-width: 400px">{{ line }}</pre>
        </td>
        <td class="col-md-3">
          <a ng-click="removeLine(line)" class="btn btn-warning">Remove line</a>
        </td>
      </tr>
    </tbody>
  </table>

Javascript

$scope.selectAll = function(product_id, line){

  target = document.getElementById('line_'+line+'_product_'+product_id);

  checkboxes = target.getElementsByTagName('input');

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox') {

      category = checkboxes[i].dataset.category;

      if($scope.excluded.indexOf(parseInt(category)) == -1)
      {
        checkboxes[i].checked = true;
        // TODO: Check the checkbox, and set its bool parameter to TRUE     
      }
    }
  }
}

更新完整的解决方案

上面的代码有几个问题。首先，我试图通过操纵 DOM 来解决问题，这与 Angular 试图实现的目标大相径庭。

所以解决方案是在产品上添加一个“选中”属性，这样我就可以跟踪它们是否包含在订单行中，然后 View 会自动更新。

此方法的一个缺点是负载会大得多(除非在将其发送到后端 API 之前对其进行过滤)，因为每个订单行现在都有所有产品的数据，即使它们未被选中也是如此。

此外，让我感到困惑的一点是忘记了 Javascript 传递对象/数组的 references，而不是新副本。

解决方案

Javascript

 var myApp = angular.module('myApp', []);

myApp.controller('CartForm', ['$scope', function($scope) {

  var inventory = [
{ 
  id: 1, 
  name: 'T Shirts',
  checked: false, 
  children: [
    { id: 4, name: 'Round-neck', checked: false, children: [] },
    { id: 5, name: 'V-neck', checked: false, children: [] },
    { id: 6, name: 'String vest (exclude)', checked: false, children: [] }
  ] 
},
{ 
  id: 2, 
  name: 'Jackets',
  checked: false, 
  children: [
    { id: 7, name: 'Denim jacket', checked: false, children: [] },
    { id: 8, name: 'Glitter jacket', checked: false, children: [] }
  ] 
},
{ 
  id: 3, 
  name: 'Shoes', 
  checked: false, 
  children: [
    { id: 9, name: 'Oxfords', checked: false, children: [] },
    { id: 10, name: 'Brogues', checked: false, children: [] },
    { id: 11, name: 'Trainers (exclude)', checked: false, children: []}
  ] 
}
   ];

  $scope.debug_mode = false;


  var products = angular.copy(inventory);

  $scope.orderHeader = {
order_no: 1,
total: 0,
lines: [
  {
    no: 1,
    products: products,
    total: 0,
    quantity: 0
  }
]
  };


  $scope.excluded = [6, 11];

   $scope.addLine = function() {

 var products = angular.copy(inventory);

  $scope.orderHeader.lines.push({
      no: $scope.orderHeader.lines.length + 1,
      products: products,
      quantity: 1,
      total: 0
  });

  $scope.loading = false;

}


    $scope.removeLine = function(index) {
  $scope.orderHeader.lines.splice(index, 1);
}  


$scope.selectAll = function(product){

  angular.forEach(product.children, function(item){
    if($scope.excluded.indexOf(parseInt(item.id)) == -1) {
        item.checked=true;
    }
  });

}

$scope.removeAll = function(product){

  angular.forEach(product.children, function(item){
    item.checked=false;
  });

}

$scope.toggleDebugMode = function(){
  $scope.debug_mode = ($scope.debug_mode ? false : true);
}


}]);

Click here to see the Plunker

Answer 1

您首先没有利用将对象和数组传递到您的 Controller 函数以及使用 DOM 而不是您的数据模型来尝试更新状态，这确实让事情变得过于复杂

考虑这种通过 ng-model

向每个产品添加 checked 属性的简化

<!-- checkboxes -->
<li ng-repeat="child in product.children">
       <input ng-model="child.checked"  >
</li>

如果向项目本身添加属性不切实际，您始终可以为选中的属性保留另一个数组，该数组具有与子数组匹配的索引。为此在 ng-repeat 中使用 $index

并将整个对象传递到 selectAll()

<a ng-click="selectAll(product,line)">

允许在 Controller 中执行:

$scope.selectAll = function(product, line){      
  angular.forEach(product.children, function(item){
       item.checked=true;
  });
  line.products=product.children;      
}

使用 Angular 你需要始终首先考虑操作你的数据模型，然后让 Angular 管理 DOM

强烈建议阅读:"Thinking in AngularJS" if I have a jQuery background?

DEMO