通过条件角js过滤元素

时间:2016-10-31 15:06:00

标签: javascript angularjs angular-filters

我在控制器中定义了以下数组:

var people = [
        {
            name:"Alice",
            number:'808574629632',
            email:"navlanisahib1@gmail.com",
            rating:'100',
            id:0,
        },
        {
            name:"Bob",
            number:'808579632',
            email:"nsahib1@gmail.com",
            rating:'100',
            id:1,
        },
        {
            name:"Eve",
            number:'8085729632',
            email:"navlani1@gmail.com",
            rating:'47',
            id:2,
        },
    ];

我想过滤所有rating属性大于50的元素。我已经使用'| filter:'过滤器通过条件搜索过滤元素,但确实找不到任何有用的东西。

1 个答案:

答案 0 :(得分:3)

您可以将函数声明为控制器上的过滤器表达式。根据{{​​3}},可以应用类似{{ filter_expression | filter : expression : comparator : anyPropertyKey}}的过滤器,expression也可以是字符串,对象或函数,在这种情况下,完全适合您需要的假设你需要使用| filter

ng-repeat="person in people | filter:ratingGreaterThan50"

$scope.ratingGreaterThan50 = function (item) {
    return item.rating > 50;
}

以下代码段实现了此自定义过滤器解决方案:



angular.module('myApp', [])
  .controller('myController', function($scope) {

    $scope.ratingGreaterThan50 = function(item) {
      return item.rating > 50;
    }

    $scope.people = [{
      name: "Alice",
      number: '808574629632',
      email: "navlanisahib1@gmail.com",
      rating: '100',
      id: 0,
    }, {
      name: "Bob",
      number: '808579632',
      email: "nsahib1@gmail.com",
      rating: '100',
      id: 1,
    }, {
      name: "Eve",
      number: '8085729632',
      email: "navlani1@gmail.com",
      rating: '47',
      id: 2,
    }, ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
  <ul>
    <li ng-repeat="person in people | filter:ratingGreaterThan50">{{person.name}}</li>
  </ul>
</div>
&#13;
&#13;
&#13;