javascript - 使用单个文本框向多个字段添加严格搜索

标签 javascript angularjs

有一个基本的 Angular 应用程序,

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'
}]
});

我希望能够按名称描述进行搜索,但不能按loremipsum进行搜索

我该怎么做?

Example on JS BIN

最佳答案

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

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>

关于javascript - 使用单个文本框向多个字段添加严格搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29363590/

相关文章:

javascript - 使用 array_push() 添加元素并循环创建 json 数据

javascript - GraphQL查询错误消息: argument is required,但未提供

javascript - 当状态更新时,React 组件不会重新渲染

javascript - 使用带有多个过滤器的比较器的 angularjs 过滤器

javascript - 可以使用 $compile 克隆自身的 Angular 指令 - 非法使用包含

javascript - 传递 id 的 Angular 路由不起作用

javascript - 将具有不同 colspan 的行插入表中

javascript - CodeMirror document.getElementById 在所有 id 上,连字符前有 x

angularjs - 如何使用 mongoose 在 Node 服务器上以编程方式仅预加载 MongoDB 文档一次

javascript - AngularJS - 为什么不替换 : true work with templateUrl property?