如何使用ng-repeat复选框和Angularjs过滤表 [英] How to filter through a table using ng-repeat checkboxes with Angularjs

问题描述

过了一段时间，这是工作，但不知何故，它是破碎。我想能够使用ng-repeat生成复选框，以根据存储的数据获取所需的复选框，并使用这些复选框来过滤生成的表。

此外，我不想重复相同的值复选框。

我做了一个plnkr

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

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

总结。

1. 复选框用于过滤 Ref 。


<
使用 Ref 。

解决方案

好的，这是怎么做的。

首先，添加几行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 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）; 
} 
}; 
  

Phew。

您的Plunkr的版本 不能识别 unique 属性，因此我添加了一个到您的控制器。

最后，将html更改为：

 < div class =row 
< label data-ng-repeat =x in projects | unique：'b'| orderBy：'b'> 
< input 
 id =xb
 type =checkbox
 ng-click =toggleSelection（xb）
 ng-init =selectedRefs。 push（xb）
 ng-checked =selectedRefs.indexOf（xb）> -1/> 
 {{x.b}} 
< / label> 
< / div> 
  

...和您的ng-重复到此...

 < tr ng-click =isCollapsed =！isCollapsedng-repeat-start =x in projects | filter：myFilter | orderBy：orderProp> 
  

如果您想知道这是如何工作的，请添加以下行：

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

我喜欢这个窍门：你可以看到我们的 selectedRefs 数组，看到它改变，我们打勾/取消我们的复选框。这在开发/测试我们的绑定时真的很有帮助！

可以看到，这些更改使用新的 unique 函数来获取不同值的列表您的项目数组，当页面首次加载时，我们将所有的值推入我们新的 selectedRefs 数组。

  [123，321，456，654，789，987 
  

然后，当您勾选/取消复选框，我们从此列表中添加/删除该项。 / p>

最后，我们在 ng-repeat 中使用该过滤器。

  ng-repeat-start =x in projects | filter：myFilter | orderBy：orderProp
   
 
作业完成！
 
 
 
 更新 
 
 
 
如果您想开始关闭所有复选框未命中，那么这是一个简单的更改。只需删除此行... 
  ng-init =selectedRefs.push（xb） 
  
 ..并将 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 = []; 
}; 
  
（我没有测试过这些建议。）
 
Once upon a time this was working but somehow it's broken. I want to be able to produce checkboxes using ng-repeat to get as many checkboxes as required based on stored data and use these to filter through a table produced. 

Additionally I don't want identical values for the checkboxes to be repeated.

I have made a plnkr with the code.
<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

So in summary.

Checkboxes to filter Ref.
Checkboxes to be unique.
Checkboxes to be made based off ng-repeat using Ref.

解决方案
Okay, here's how to do it.

First, let's add a couple of lines of CSS in your  to make sure all the checkboxes are visible:
<style>
  .row { margin-left: 0px }
  input[type=checkbox] { margin-left: 30px; }
</style>
Next, add the following lines to your controller:
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);
    }
  };
Phew.

For some reason, your Plunkr's version of AngularJS didn't recognise the unique attribute, so I added one to your controller.

Finally, change your html to this:
<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>
... and your ng-repeat to this... 
<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp">
If you're interested in knowing how this works, add these lines:
<div style="margin:10px 10px 30px 10px">
  <pre>{{ selectedRefs }} </pre>
</div>
I love this trick: you can see the exact contents of our "selectedRefs" array, and see it change as we tick/untick our checkboxes.  This really helps when developing/testing our bindings!



As you can see, these changes use the new unique function to get your list of distinct values from your project array, and when the page first loads, we push all of the values into our new "selectedRefs" array.
["123","321","456","654","789","987"] 
Then, as you tick/untick the checkboxes, we add/remove that item from this list.

Finally, we use that filter in the ng-repeat.
ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp"
Job done !

Update

If you wanted to start off with all checkboxes unticked, then it's a simple change.  Just remove this line...
ng-init="selectedRefs.push(x.b)"
..and change the myFilter function to show all items initially..
$scope.myFilter = function (item) { 
    if ($scope.selectedRefs.length == 0)
        return true;

    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
};
And to add a "Clear all" button, simply add a button to your form which calls a function in your AngularJS controller like this.. 
$scope.clearAll = function () { 
    $scope.selectedRefs = [];
};
(I haven't tested these suggestions though.)

                        
这篇关于如何使用ng-repeat复选框和Angularjs过滤表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！