使用单个文本框将严格搜索添加到多个字段

Question

有一个基本的角度应用程序，

HTML

  <input type="text" ng-model="txt.name" />
  <ul>
    <li ng-repeat="d in data | filter: txt:strict">
      <span>{{d.name}}</span>
      <br />
      <span>{{d.description}}</span>
      <br />
      <span>{{d.loremipsum}}</span>
      <br />
    </li>
  </ul>

JS：

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

app.controller("mc", function($scope){

$scope.data = [{
  'name': 'asd',
  'description': 'jiocioasdiasidjpoasdko',
  'loremipsum': 'loremipsum'
}, {
  'name': 'qwe',
  'description': 'poqwpeqwpe',
  'loremipsum': 'loremipsum'
}, {
  'name': 'czxc',
  'description': 'asdasdasd',
  'loremipsum': 'loremipsum'
}]
});

我希望能够同时按name和description进行搜索，但不能按loremipsum

我怎样才能做到这一点？

JS BIN上的示例

Answer 1

您可以创建自定义过滤器，请参见下面的演示

 var app = angular.module('app', []); app.controller("mc", function($scope) { $scope.data = [{ 'name': 'asd', 'description': 'jiocioasdiasidjpoasdko', 'loremipsum': 'loremipsum' }, { 'name': 'qwe', 'description': 'poqwpeqwpe', 'loremipsum': 'loremipsum' }, { 'name': 'czxc', 'description': 'asdasdasd', 'loremipsum': 'loremipsum' }]; }); app.filter('customFilter', function() { return function(items, string) { var filtered = []; var stringMatch = new RegExp(string, 'i'); for (var i = 0; i < items.length; i++) { var item = items[i]; if (stringMatch.test(item.name) || stringMatch.test(item.description)) { filtered.push(item); } } return filtered; }; });

 <html ng-app="app"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-controller="mc"> <input type="text" ng-model="txt.name" /> <ul> <li ng-repeat="d in data | customFilter: txt.name"> <span>{{d.name}}</span> <br /> <span>{{d.description}}</span> <br /> <span>{{d.loremipsum}}</span> <br /> </li> </ul> </body> </html>

Answer 2

这是使用自定义函数的示例：自定义函数解决方案

您可能需要在自定义函数中使用match而不是===。

使用单个文本框将严格搜索添加到多个字段

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-03-31 08:16:08

解决方案2
0 2015-03-31 08:16:00

使用单个文本框将严格搜索添加到多个字段

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-03-31 08:16:08

解决方案2 0 2015-03-31 08:16:00

解决方案1
1 已采纳 2015-03-31 08:16:08

解决方案2
0 2015-03-31 08:16:00