Question

我有一个代码可以过滤字段并标记与输入搜索相关的字词。我需要这个过滤我的不仅是标题，还有名称。如何修改代码，以便在编写时过滤标题和名称？

<li ng-repeat="item in data | filter:search.title"
   ng-bind-html="item.title | highlight:search.title">
</li>

http://jsfiddle.net/sgo3wxwc/

Answer 1

您可以通过在对象中收集它们来发送两个或更多选项进行过滤：

<li ng-repeat="item in data | filter:{title:search.title,name:search.name}"
   ng-bind-html="item.title | highlight:search.title">
</li>

建议在控制器中使用过滤器以避免对它们进行$ digest循环

Answer 2

<div ng-app="myApp" ng-controller="myCtrl">
      <input type="text" placeholder="Search" ng-model="search.title">
  <ul>
      <!-- with filter -->
       <li ng-repeat="item in data | filter:{title:search.title,name:search.name}"
   ng-bind-html="item.title | highlight:search.title">
         {{item}}
      </li>
      </ul>
</div>

脚本代码在这里：

    var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.data = [
            { title: "Bad",name:'bill' },
            { title: "Good",name:'Goe' },
            { title: "Great",name:'Brad' },
            { title: "Cool",name:'yan' },
            { title: "Excellent",name:'mikle' },
            { title: "Awesome",name:'mosa' },
            { title: "Horrible",name:'morteza' },
          ]

}).filter('highlight', function($sce) {
    return function(text, phrase) {
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')

      return $sce.trustAsHtml(text)
    }
  })

在Angular.js中按两个字段过滤

2 个答案: