如何取消选中在 ng-repeat 中过滤的复选框答案

【问题标题】：How to uncheck a checkbox that gets filtered in ng-repeat如何取消选中在 ng-repeat 中过滤的复选框
【发布时间】：2016-09-28 15:20:52
【问题描述】：

我已经为这个问题摸索了好几个小时，但我似乎无法弄清楚，所以想知道你们是否可以提供帮助。

我在 json 文件中有一组对象，我正在根据文件中的不同属性制作过滤菜单，人们可以在视图中选中/取消选中以过滤结果。我遇到的问题是能够取消选中菜单中由于在当前显示的结果中不可用而隐藏的任何项目。

我在这里有一个 plunker 示例：https://plnkr.co/edit/KZmMiSisA1gKyahG5rHF

来自 plunker 的样本：

$scope.list = [
    { parent : 'fruit', type : 'orange' },
    { parent: 'fruit', type : 'apple' },
    { parent : 'fruit', type : 'kiwi' },
    { parent : 'vegetable', type : 'kale' },
    { parent : 'vegetable', type : 'cabbage' }
];
$scope.filtered = $scope.list;

$scope.selectedType = [];
$scope.selectedParent = [];

$scope.$watch(function () {
    return {
    selectedType: $scope.selectedType,
    selectedParent: $scope.selectedParent,
}
}, function (value) {
      var filterType = {
          parent : $scope.selectedParent,
          type : $scope.selectedType,
      };

      var startFilter = $scope.list;

      for (var i in filterType) {
        startFilter = filter(startFilter, filterType[i], i);
      }

      $scope.filtered = startFilter;

}, true);

基本上，如果有人选择“水果”然后选择“橙色”，然后取消选中“水果”，我希望“橙色”也取消选中。

【问题讨论】：

plunker 不运行。再次检查链接。
现在可以用了吗？对不起！我想我一旦让它正常工作就没有更新。
问题是 selectedType 在取消选中时没有被清除。所以在 $watch 中你可以检查 selectedParent 项并从 selectedType 拼接它们。
我知道，但问题是两个数组之间没有引用，我不确定如何进行检查。

标签： angularjs ng-repeat watch angular-filters checklist-model

【解决方案1】：

我刚刚检查了你的 plunker。最下面的代码很复杂，不过这些sn-ps或许能帮到你。

为父母添加ng-change属性：

<input type="checkbox" 
       checklist-model="selectedParent"
       checklist-value="key"
       data="{{::key}}" 
       ng-change="checkParent(key, checked)"/>

现在您可以检测控制器中的更改：

$scope.checkParent = function(parent, checked) {
  if (!checked) {
    $scope.list.filter(function(fruit) {
      return fruit.parent === parent;
    }).forEach(function(fruit) {
      $scope.selectedType = $scope.selectedType.filter(function(_selectedType) {
      return _selectedType != fruit.type;
      });
    });
  }
};

Plunkr

请注意，这是低效的，因为它会过滤每个要取消选择的水果的 Selected 类型，可以使用一些不错的功能工具对其进行重构。

但总的来说，如果可能的话，我会更改控制器，并创建一个具有这种结构的地图：

{
   parent: {
     name: "fruit"
     selected: false,
     children: [{
       type: "organge"
       selected: false
     }]
     ...
}

这样您可以使您的控制器代码更具可读性。

编辑：

我正在检查你写的两个过滤器。我想不出更好的代码，因为我仍然认为您应该更改数据结构。一遍又一遍地迭代列表是一个昂贵的过程，并且您的两个过滤器都有两个嵌套的 for 循环。我想不出用你的数据结构摆脱它们的简单方法。

我花了一些时间重构您的代码，摆脱手表并使用 lodash。查看更新的Plunk，希望对您有所帮助。

【讨论】：

我可以从 json 文件创建一个分层过滤器数组，但是我担心这会影响性能，因为实际数据集非常大，并且会导致 ng-repeats 中的 ng-repeats 用于后续过滤器 +加载两组数据，而不是在一组中过滤。
如果您对改进上述代码有任何建议，我很想听听。

【解决方案2】：

我将此功能添加到您的插件中：

 $scope.uncheck = function(key){

  $scope.selectedType.splice(key)
}

这是给父母的：

       <input type="checkbox" checklist-model="selectedParent" checklist-value="key" data="{{::key}}" ng-change="uncheck(key)" />

如果这确实是您想要完成的，它对我有用。

【讨论】：