Question

我正在寻找为多行输入实现“check-all”输入的最佳方法。

在这种情况下，由于列表视图有多种类型，每个列表视图都有自己的指令和控制器。

我正在考虑在父指令的模板中实现check-all控件作为属性指令，如：

<input check-all="'nameOfParentDirective'">

我们的想法是将父指令的名称作为自定义属性的值传递，因此Check All Directive的这个实例知道要使用哪个父作用域，从而检查或取消选中该行中的所有行。各自的表。

这是我挂断的地方，我不知道如何动态设置需求值。静态设置很容易：

require: '^parentDirective',

但这不会起作用。

也许我过于复杂化了，我猜测有一种更简单的方法可以做到这一点。

最终结果是在父指令的输入上冒泡检查/取消选中更改事件，因此可以相应地选中或取消选中所有复选框...

干杯！

Answer 1

我建议采取另一种方法。而不是尝试进行某种DOM操作挑战，只需更新一个模型，该模型存储有关所选内容的信息并使用它来驱动视图。只要项目集合具有某些共享属性（如“已选择”），那么对象具有哪些其他属性并不重要，因此这可以应用于任意数量的列表。很快就会有一个样本。

angular.module('TestApp', [])

.factory('UtilFactory', function(){
  var utilFact = {};
  
  utilFact.selectAll = function(array){
    for(var i=0; i<array.length; i++){
      array[i].selected = true;
    }
  }
  
  return utilFact;
})
.controller('SomeCtrl', function($scope, UtilFactory){
  var randData = [];
  for(var i=0; i<100; i++){
    randData.push({
      id:i,
      data:Math.random()
    });
  }
  
  $scope.someData = randData;
  
  $scope.UtilFactory = UtilFactory;

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="TestApp" ng-controller="SomeCtrl">
    <button ng-click="UtilFactory.selectAll(someData)">Select All</button>
  <div ng-repeat="item in someData">
    <label>
      <input type="checkbox" ng-model="item.selected"/>
      {{item.data}}
    </label>
  </div>
</div>

AngularJS实施的最佳方法是将所有输入检查为可重复使用的指令

1 个答案: