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>

http://plnkr.co/edit/RBjSNweUskAtLUH3Ss6r?p=preview

因此总而言之.

>复选框以过滤参考.
>复选框是唯一的.
>使用Ref.基于ng-repeat进行复选框.

解决方法:

好的,这是操作方法.

首先,让我们在您的代码中添加几行CSS,以确保所有复选框均可见：

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

接下来,将以下行添加到您的控制器：

app.filter('unique', function() {

  return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

  app.controller("maincontroller",function($scope){
    $scope.query = {};
    $scope.quer = {};
    $scope.queryBy = '$';
    $scope.isCollapsed = true;
    $scope.selectedRefs = [];

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

  $scope.toggleSelection = function toggleSelection(id) {
    var idx = $scope.selectedRefs.indexOf(id);
    if (idx > -1) {
      $scope.selectedRefs.splice(idx, 1);
    }
    else {
      $scope.selectedRefs.push(id);
    }
  };

ew

由于某些原因,您的Plunkr版本的AngularJS无法识别唯一属性,因此我在您的控制器中添加了一个.

最后,将您的html更改为：

<div class="row">
    <label data-ng-repeat="x in projects | unique:'b' | orderBy:'b'" >
        <input
        id="x.b"
        type="checkbox"
        ng-click="toggleSelection(x.b)"
        ng-init="selectedRefs.push(x.b)"
        ng-checked="selectedRefs.indexOf(x.b) > -1" />
        {{x.b}} 
    </label>
</div>

…以及您对此的ng-repeat …

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

如果您想了解其工作原理,请添加以下行：

<div style="margin:10px 10px 30px 10px">
  <pre>{{ selectedRefs }} </pre>
</div>

我喜欢这个技巧：您可以看到“ selectedRefs”数组的确切内容,并且可以在选中/取消选中复选框时看到它的变化.开发/测试我们的绑定时,这确实有帮助！

如您所见,这些更改使用新的唯一函数从您的项目数组中获取不同值的列表,并且在首次加载页面时,我们将所有值推入新的“ selectedRefs”数组中.

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

然后,当您勾选/取消选中复选框时,我们从该列表中添加/删除该项目.

最后,我们在ng-repeat中使用该过滤器.

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

任务完成 ！

更新资料

如果您希望所有复选框都未选中,那么这是一个简单的更改.只需删除此行…

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

..并更改myFilter函数以最初显示所有项目.

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

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

要添加“全部清除”按钮,只需在表单中添加一个按钮,即可像这样在AngularJS控制器中调用一个函数.

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

(不过,我还没有测试这些建议.)

标签：angularjs,filter,angularjs-ng-repeat,javascript,checkbox
来源： https://codeday.me/bug/20191028/1950462.html