javascript - 制作充当过滤器的函数

Question

我是 AngularJS 的新手。我尝试制作充当过滤器的函数:

index.html

    <ul class="phones">
      <li ng-repeat="phone in phones | filter:isLong">
        {{phone.name}}
      </li>
    </ul>

controllers.js

phonecatApp.controller('PhoneListCtrl', function ($scope) {

  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.islong = function(phone) {
    var n = phone.name.length;
    if ( n > 7) { return true } else { return false };
  }
});

JsBin

http://jsbin.com/huwam/1/edit

但这不起作用...请帮助我。谢谢你的好意。

Answer 1

正如@zeroflagL所说，

“您只需要引用该函数，而不是调用它:”

 <li ng-repeat="phone in phones | filter:isLong">

另一种方法是创建自定义过滤器来实现此目标。

主要原因是:自定义过滤器可以在任何范围内重复使用。

html

<ul class="phones">
  <li ng-repeat="phone in phones | islong">
    {{phone.name}}
  </li>
</ul>

javascript

phonecatApp.filter("islong", function() {
    return function(items) {
       return items.filter(function(item) { return item.name.length > 7});
    };
});

http://plnkr.co/edit/F374dQ?p=preview

也许您想添加参数:

html

<ul class="phones">
  <li ng-repeat="phone in phones | islong:7">
    {{phone.name}}
  </li>
</ul>

javascript

phonecatApp.filter("islong", function() {
    return function(items, length) {
       return items.filter(function(item) { return item.name.length > length});
    };
});

来源:https://docs.angularjs.org/tutorial/step_09