Angularjs - 如何对多个变量进行搜索过滤答案

【问题标题】：Angularjs - How to make a search filter on multiple variablesAngularjs - 如何对多个变量进行搜索过滤
【发布时间】：2016-01-07 04:29:04
【问题描述】：

我有一个如下所示的搜索输入字段：

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />

在一个 div 中，我有一个 ng-repeat，如下所示：

<div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name' | startFrom: currentPage*pageSize | limitTo: pageSize">

每个项目都有一个名称和一个编号。目前，搜索过滤器仅适用于 Name，因为在 ng-model 中我已经编写了 search.Name。

我还想要将搜索过滤器应用于变量 Number。

我对 angularjs 完全陌生，发现它有点混乱，所以我不知道该怎么做 :)

我尝试过类似以下的方法：

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name | search.Number" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name, search.Number" />

但以上都不起作用。

谁能告诉我如何做到这一点？

谢谢:)

【问题讨论】：

标签： javascript angularjs search filter

【解决方案1】：

您只能使用 search 表示 search.Name。

看看下面的笨蛋

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};
  
  $scope.listItems = [
    {'Name': 'abcd', 'Number':120},
    {'Name': 'abc', 'Number':12},
    {'Name': 'abcx', 'Number':23},
    {'Name': 'xyz', 'Number':24}
  ];
  $scope.listItemsFiltered = $scope.listItems;
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <input type="search" placeholder="Search" ng-cloak ng-model="search" />
      
      <div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name'">{{item}}</div>
    </div>
  </body>

</html>

【讨论】：

【解决方案2】：

试试这个：

创建两个输入框。一个是名字，一个是号码

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Number" />

现在对相应的字段进行过滤

<div ng-repeat="item in listItemsFiltered = (listItems | filter:{name: search.Name, number: search.Number}) | orderBy:'Name' | startFrom: currentPage*pageSize | limitTo: pageSize">

【讨论】：

【解决方案3】：

试试这个方法

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.$" />

其中“$”表示在“搜索”对象的所有键中搜索

参考：https://docs.angularjs.org/api/ng/filter/filter

【讨论】：

我试过了。问题在于它搜索所有内容。我只想要姓名和号码。 :)
那么我建议您按照 Chetan 的建议创建自定义过滤器

【解决方案4】：

我可以和你分享想法：-

尝试使用 angularJS 过滤器或服务，通过使用此您可以实现此目的。

或者创建您自己的自定义过滤器，而不是使用内置过滤器。

例子：

angular.module('module', [])

.filter('customfiltername', function() {

返回函数（输入）{

返回“值”；

}; });

【讨论】：

【解决方案5】：

看看这个Plunker（不是我的）

 $scope.search = function (row) {
        return (angular.lowercase(row.Name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                angular.lowercase(row.Number).indexOf(angular.lowercase($scope.query) || '') !== -1);
    };

解决方案是创建您自己的过滤器，该过滤器将应用于两个（或更多）值！

【讨论】：