Javascript 如何使用Angularjs的ng repeat复选框筛选表格

从前，这是工作，但不知何故，它打破了。我希望能够使用ng repeat生成复选框，以根据存储的数据获取所需数量的复选框，并使用这些复选框过滤生成的表

此外，我不希望重复复选框的相同值

我用代码做了一个plnkr

<div class="row">
    <label data-ng-repeat="x in projects">
        <input
        type="checkbox"
        data-ng-true-value="{{x.b}}"
        data-ng-false-value=''
        ng-model="quer[queryBy]" />
        {{x.b}}
    </label>
</div>

{{x.b}}

总而言之

用于筛选

Ref

的复选框

复选框必须是唯一的

使用

Ref

根据

ng repeat

创建复选框

---

ng false value

指令需要设置一个值。请尝试

ng false value='false'

或

ng false value='null'

（事实上，如果这个值必须是一个伪值，而不是具体的值，比如字符串或某个数字，您可以完全跳过它）

正如您在注释中指出的，在选中并清除复选框后，所有行都将被过滤掉。之所以会出现这种情况，是因为取消选中复选框会将其值设置为false，而这与实体的值不一致（您可能知道，只是为其他实体声明）

因此，最终需要将该值设置为空字符串。就是这样：

$scope.$watch('quer.$', function () {
  if ($scope.quer.$ === false) {
    $scope.quer.$ = '';
  }
});

---

好的，这是怎么做的

首先，让我们在中添加几行CSS，以确保所有复选框都可见：

<style>
  .row { margin-left: 0px }
  input[type=checkbox] { margin-left: 30px; }
</style>

。。。你的ng重复这个

<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp">

然后，当您勾选/取消勾选复选框时，我们会在此列表中添加/删除该项

最后，我们在

ng repeat

中使用该过滤器

ng-init="selectedRefs.push(x.b)"

工作完成了

更新

如果您想在开始时取消选中所有复选框，那么这是一个简单的更改。只要去掉这条线

$scope.myFilter = function (item) { 
    if ($scope.selectedRefs.length == 0)
        return true;

    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
};

..并将

myFilter

功能更改为最初显示所有项目

$scope.clearAll = function () { 
    $scope.selectedRefs = [];
};

要添加一个“全部清除”按钮，只需在表单中添加一个按钮，该按钮调用AngularJS控制器中的函数，如下所示

---

（不过我还没有测试这些建议。）

这是一个局部修复。谢谢你的帮助。问题是，在执行此操作时，当您取消选中复选框并且无法选择多个复选框时，表数据将不会重新显示列。你对此有什么想法吗？亲爱的上帝，什么css属性会给这只手带来麻烦？？我现在想知道d这是Windows 10中的新默认光标。不过，他们可能会选择在发布之前对其进行更改。；-）明亮的非常感谢，对本文和将来的参考非常有帮助。@MikeGledhill如果我敢的话，还有两个问题。您将如何实现“全部清除”按钮，以及如何反转当前功能；也就是说，如何在表格完全填充的情况下取消选中所有复选框，然后单击复选框以优化结果？

["123","321","456","654","789","987"] 

ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp"

ng-init="selectedRefs.push(x.b)"

$scope.myFilter = function (item) { 
    if ($scope.selectedRefs.length == 0)
        return true;

    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
};

$scope.clearAll = function () { 
    $scope.selectedRefs = [];
};