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

2019年8月6日 111次阅读

描述

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

可在每条线上选择的产品基于产品层次结构.例如：

示例产品显示

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来说明购物车,以及我想要做的事情.

到目前为止,它可以：

>添加/删除订单行
>添加/删除产品
>为部分中的所有产品添加“检查”,不包括“排除”数组中的任何产品

问题

但是,虽然它在输入中添加了检查,但它不会触发输入上的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试图实现的非常相反.

因此,解决方案是在产品上添加“已检查”属性,以便我可以跟踪它们是否包含在订单行中,然后视图会自动更新.

这种方法的一个缺点是有效载荷会明显更大(除非它在被发送到后端API之前被过滤),因为每个订单行现在都有所有产品的数据,即使它们未被选中.

另外,让我失望的一点是忘记了Javascript传递了对象/数组的引用,而不是新的副本.

解决方案

使用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

最佳答案 通过不利用将对象和数组传递到控制器函数以及使用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)">

这允许在控制器中执行：

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

使用angular,您需要始终考虑先操作数据模型,然后让角度管理DOM

强烈建议阅读：“Thinking in AngularJS” if I have a jQuery background?

DEMO

点赞