[英]AngularJS ng-repeat with checkbox and filter
I have ng-repeat list, and I need to filter that list with checkbox. 我有ng-repeat列表,我需要使用复选框过滤该列表。 In checkbox I have three value, ERROR, WARNING, SUCCESS.
在复选框中,我有三个值:错误,警告,成功。 If I check ERROR, show only error, if I check ERROR and WARNING show error and warning, same with success.
如果我检查错误,则仅显示错误,如果我检查错误,并且警告显示错误和警告,则与成功相同。 But problem is, when I check ERROR box, list show only data with error, but when I check WARNING, they show all data in list, not only ERROR and WARNING data.
但是问题是,当我选中“错误”框时,列表仅显示有错误的数据,但是当我选中“警告”时,它们显示列表中的所有数据,不仅是错误和警告数据。 For better explanation here is
为了更好的解释,这里是
> http://jsfiddle.net/ADukg/12574/
It's because of your toggleFilter()
function 这是因为您的
toggleFilter()
函数
$scope.toggleFilter= function(filterValues) {
if ($scope.filterValue == undefined) {
$scope.filterValue = filterValues;
} else {
delete $scope.filterValue;
}
};
What is does: 有什么作用:
So when you check ERROR, it sets ERROR as filter, but when you then click WARNING too, it triggers the else
, and removes the current selection. 因此,当您选中ERROR时,它将ERROR设置为过滤器,但是当您再次单击WARNING时,它将触发
else
并删除当前选择。
When you change your else
to: 当您将
else
更改为:
else {
delete $scope.filterValue;
console.log($scope.filterValue);
}
You can see it logs undefined
when selecting more than 1 filter. 选择多个过滤器时,您会看到
undefined
日志。
Because there is no any solution for this, here is my code how I fix this. 因为对此没有任何解决方案,所以这是我的代码如何修复此问题。
<div class="nav">
<div ng-repeat="filter in filters" ng-class="{sel: selection.indexOf(filterValue) == selected}">
<span class="filters_ct_status"></span>
<div ng-repeat="filterValue in filter.lists" style="float:left; padding: 5px">
<input type="checkbox" value="{{filterValue}}" ng-model="checked" ng-checked="selection.indexOf(filterValue) > -1" ng-click="toggleSelection(filterValue)">
<img ng-if="filterValue == 'Success'" src="assets/img/success.png" alt="success"/>
<img ng-if="filterValue == 'Warning'" src="assets/img/warning.png" alt="warning"/>
<img ng-if="filterValue == 'Error'" src="assets/img/error.png" alt="Error"/>
</div>
</div>
</div>
<div class="table_bench_info logBox" style="overflow-y: auto; height: 250px;">
<div class="list" ng-repeat="list in lists">
<span ng-if="listaFiltera.indexOf(list.class) !== -1">{{list.description}}</span>
</div>
</div>
and there is controller 并且有控制器
$scope.filterValue = [];
// toggle selection for a given employee by name
$scope.toggleSelection = function(valueFilter) {
var idx = $scope.filterValue.indexOf(valueFilter);
if (idx > -1) {
$scope.filterValue.splice(idx, 1);
if($scope.filterValue.length == 0){
return $scope.listaFiltera = ['Error','Warning','Success'];
}else{
$scope.listaFiltera = $scope.filterValue.map(function(x) {
return x;
});
}
} else {
$scope.filterValue.push(valueFilter);
$scope.listaFiltera = $scope.filterValue.map(function(x) {
return x;
});
}
};
$scope.filters = [
{
lists: ['Error','Warning','Success']
}
];
We need push checked checkboxes to the array. 我们需要将选中的复选框压入阵列。 And splice unchecked checkboxes from the array.
然后从阵列中拼接未选中的复选框。 Also, we need to check $scope.filterValue.length if we want multiple filters.
另外,如果需要多个过滤器,则需要检查$ scope.filterValue.length。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.