如何使用带有Angularjs纳克重复复选框通过过滤表 [英] How to filter through a table using ng-repeat checkboxes with Angularjs
问题描述
曾几何时这是工作，但不知何故，就是坏了。我希望能够生产采用NG-重复获得尽可能多的复选框根据需要根据存储数据，并使用这些通过制作一个表格来过滤复选框。
此外我不希望相同的值要重复的复选框。
我曾向code一plnkr。
＆LT; DIV CLASS =行＆GT;
＆LT;标签数据-NG-重复=X项目中＆GT;
＆LT;输入
类型=复选框
数据-NG-真值={{x.b}}
数据-NG-假值=''
NG-模式=曲儿[queryBy]/＆GT;
{{x.b}}
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
http://plnkr.co/edit/RBjSNweUskAtLUH3Ss6r?p=$p$ PVIEW
因此，在总结。
-
复选框来过滤
参考。 -
复选框是独一无二的。
- 要根据关闭
复选框取得
NG-重复使用参考。
好吧，这里是如何做到这一点。
首先，让我们添加一对夫妇的CSS行的您，以确保所有的复选框是可见的：
＆LT;风格＆GT;
.row {保证金左：0像素}
输入[类型=复选框] {保证金左：30PX; }
＆LT; /风格＆GT;
接下来，下面几行添加到您的控制器：
app.filter（独一无二，函数（）{ 返回功能（ARR，场）{
变种O = {}，I，L = arr.length，R = [];
对于（I = 0; I＆所述; l;和I + = 1）{
Ø[ARR [I] [现场] =改编[I]
}
对（我在邻）{
r.push（O [I]）;
}
返回ř;
};
}） app.controller（maincontroller功能（$范围）{
$ scope.query = {};
$ scope.quer = {};
$ scope.queryBy =$;
$ scope.isCollapsed =真;
$ scope.selectedRefs = []; $ scope.myFilter =功能（项目）{
VAR IDX = $ scope.selectedRefs.indexOf（item.b）;
返回IDX！= -1;
}; $ scope.toggleSelection =功能toggleSelection（ID）{
变种IDX = $ scope.selectedRefs.indexOf（ID）;
如果（IDX -1个）{
$ scope.selectedRefs.splice（IDX，1）;
}
其他{
$ scope.selectedRefs.push（ID）;
}
};
唷。
由于某些原因，你Plunkr的版本的 AngularJS 的不承认唯一属性，所以我加了一个控制器。
最后，你的HTML改成这样：
＆LT; DIV CLASS =行＆GT;
＆LT;标签数据-NG-重复=X项目中|独特之处：'B'|排序依据：'B'＆GT;
＆LT;输入
ID =x.b
类型=复选框
NG-点击=toggleSelection（x.b）
NG-的init =selectedRefs.push（x.b）
纳克核对=selectedRefs.indexOf（x.b）-1个/＆GT;
{{x.b}}
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
...和你的NG-重复这个...
＆LT; TR NG点击=isCollapsed = isCollapsed！NG-重复启动=在项目x |过滤器：myFilter |排序依据：orderProp＆GT;
如果您有兴趣知道这是如何工作的，加上这些行：
＆LT; DIV的风格=保证金：10px的10px的30PX 10px的＆GT;
＆LT; pre＆GT; {{selectedRefs}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;
我喜欢这个窍门：你可以看到我们的 selectedRefs 数组的确切内容，并把它改变，因为我们勾选/取消勾选复选框我们。开发/测试我们的绑定时，这真的帮助！
如你所见，这些变化使用新的唯一函数从你的项目阵列，当第一次加载页面，我们就将所有的值到我们的新的 selectedRefs 阵列。
[123，321，456，654，789，987]
然后，你打勾/取消选中的复选框，我们添加/从列表中删除该项目。
最后，我们使用的过滤器中的 NG-重复。
NG-重复启动=在项目x |过滤器：myFilter |排序依据：orderProp
作业已完成！
更新
如果你想与所有的复选框的取消选中开始的，那么它是一个简单的变化。刚删除的这一行...
NG-的init =selectedRefs.push（x.b）
..并修改 myFilter 功能最初显示所有项目。
$ scope.myFilter =功能（项目）{
如果（$ scope.selectedRefs.length == 0）
返回true; VAR IDX = $ scope.selectedRefs.indexOf（item.b）;
返回IDX！= -1;
};
和添加一个全部清除按钮，只要将按钮添加到您的形式，它在你的AngularJS的控制器像这样调用一个函数。
$ scope.clearAll =功能（）{
$ 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-repeatusingRef.
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.)
这篇关于如何使用带有Angularjs纳克重复复选框通过过滤表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
