javascript - 通过条件过滤元素 Angular js

Question

我在 Controller 中定义了以下数组:

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,
        },
    ];

我想过滤所有评级属性大于 50 的元素。我在谷歌上搜索了很多关于使用 '| 通过条件过滤元素的信息过滤器:'过滤但没有找到任何有用的东西。

Answer 1

您可以声明一个函数作为 Controller 上的过滤表达式。根据docs for filter过滤器可以像{{filter_expression |过滤器 : 表达式 : 比较器 : anyPropertyKey}} 而且，表达式 可以是字符串、对象或函数，在这种情况下，假设您需要，它完全适合您的需要使用 |过滤器。

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>