如何在AngularJS搜索过滤器上添加另一个过滤器?

时间:2014-02-07 12:35:49

标签: javascript angularjs angularjs-filter

我设置了搜索过滤器并使用搜索输入元素进行操作:

<input placeholder="Search" type="text" ng-model="search.$"/>

并且

<tr ng-repeat="person in people | filter:search:strict">
  <td>{{ person.name }}</td>
<!-- etc --!>

这可以正常工作但我想添加按钮,这些按钮能够通过属性的值过滤所有人,而不必输入,并保持搜索过滤器按原样工作。控制器和范围详细信息如下:

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

FilteringApp.controller('FilteringCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.people = [{"name":"Billy","job":"CEO","stress":"high"},
                     {"name":"Mandy","job":"CTO","stress":"high"},
                     {"name":"Susan","job":"CFO","stress":"high"},
                     {"name":"Michael","job":"CMO","stress":"low"}];
}]);

Here is a demo plunkr

1 个答案:

答案 0 :(得分:0)

您只需将search指定为具有您想要的值的其他输入字段的search.stress,即可向ng-model添加过滤器。

使用单选按钮的示例

  <label><input type="radio" value="" ng-model="search.stress">any stress</label><br/>
  <label><input type="radio" value="low" ng-model="search.stress">low stress only</label><br/>
  <label><input type="radio" value="high" ng-model="search.stress">high stress only</label>

除了自由文本搜索

之外,您现在可以过滤压力水平

http://plnkr.co/edit/1MBRoq

演示