javascript - 当我们有多个过滤器时,对数据进行“OR”操作的 angularjs 过滤器
问题描述
我检查了其他问题,但他们似乎没有解决我的问题。
这是我的代码:
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
},
{
"number": "111",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
$scope.filter456 = function (user) {
return (user.queue.find(({number}) => number === '456'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
<label class="switch">
<input type="checkbox" ng-model="queue111">111
</label>
<label class="switch">
<input type="checkbox" ng-model="queue456">456
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>
$scope.filter111
并$scope.filter456
分别过滤数据当前当我单击复选框 111 时,过滤器仅返回队列编号为 111 的记录,当我单击复选框 456 时,过滤器仅返回队列编号为 456 的记录. 这很完美。当我单击这两个过滤器时,它仅显示其队列同时具有数字 111 和 456 的对象,即此处发生 AND 操作。
预期结果:我希望这样当我同时单击复选框时,它应该同时显示 111 和 456 中的所有记录,即 OR 操作。
我该怎么做呢?
解决方案
您可以通过参考w3schools.com 示例和此链接尝试创建自定义 angularJS 过滤器(以便更好地理解自定义过滤器)。
在您的情况下,自定义 angularjs 过滤器将采用 3 个输入,即您要过滤的列表和复选框的值 - queue111 和 queue456。根据过滤器内复选框的值,通过提供必要的条件来执行过滤和返回数据。
这也减少了您在 HTML 中用于在 ng-repeat 中过滤的代码
<div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
至
<div ng-repeat="user in users|customFilter: queue111:queue456">
<p> {{user.name}} {{user.phone}}</p>
</div>
在哪里
customFilter
是您创建的 angularJS 过滤器的名称(可以是任何名称,以该名称为例)。users
将是您的自定义过滤器的默认第一个输入,您的复选框的值将分别是第二个和第三个输入。
推荐阅读
- javascript - 我想通过单击跨度来循环显示纯文本下划线和换行
- svg - Mapbox - 如何在缩放时阻止填充模式乘以/拆分 SVG 图像
- javascript - 我如何在 discord.js 中修复此嵌入消息。我使用了命令处理程序
- sql - Django 主查询按子查询排序
- php - mysql结果循环中的php电子邮件
- html - 使用jquery ui时如何限制调整大小区域
- javascript - 无法删除 Expo Location.watchPositionAsync()
- ios - 使用 glcopyteximage2d 将纹理复制到另一个纹理
- java - Android:编辑时看起来不错,在模拟器上不好 - 为什么
- javascript - 循环遍历 Javascript 对象并添加到 HTML Div