在AngularJS中通过多个特定模型属性过滤(在OR关系中)

发布时间：2020-12-17 09:11:18 所属栏目：安全来源：网络整理

导读：看看这里的例子： http://docs.angularjs.org/api/ng.filter:filter 您可以使用任何手机属性进行搜索，方法是使用 input ng-model =“search”并且您可以使用 input ng-model =“search.name”只搜索名称，并按名称适当过滤结果(输入电话号码不会返回任何结

看看这里的例子： http://docs.angularjs.org/api/ng.filter:filter

您可以使用任何手机属性进行搜索，方法是使用< input ng-model =“search”>并且您可以使用< input ng-model =“search.name”>只搜索名称，并按名称适当过滤结果(输入电话号码不会返回任何结果，如预期)。

假设我有一个具有“名称”属性，“电话”属性和“秘密”属性的模型，我将如何通过“名称”和“电话”属性而不是“秘密”属性？因此，本质上，用户可以键入名称或电话号码，并且ng-repeat将正确过滤，但即使用户键入的值等于“秘密”值的一部分，也不会返回任何内容。

谢谢。

这是 plunker

New plunker with cleaner code & where both the query and search list items are case insensitive

主要思想是创建一个过滤器函数来实现这个目的。

从official doc

function: A predicate function can be used to write arbitrary filters.
The function is called for each element of array. The final result is
an array of those elements that the predicate returned true for.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 


 $scope.search = function(item){
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
 };

更新

有些人可能会对真实世界的表现有所顾虑，这是正确的。

在现实世界中，我们可能会从控制器做这种过滤器。

这里是详细的post显示如何做到。

简而言之，我们添加ng-change到输入以监控新的搜索更改

然后触发滤波器功能。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!