如何在AngularJS中使用方法作为过滤器？答案

【问题标题】：How to use method as filter in AngularJS?如何在AngularJS中使用方法作为过滤器？
【发布时间】：2013-08-29 18:22:39
【问题描述】：

我有一个自定义数据类型Message：

function Message(body, author, date) {
    this.body = body;
    this.author = author;
    this.date = date;
    this.stars = [];
}

Message.prototype.hasStars = function() {
    return this.stars.length !== 0;
};

我也在重复这些消息的数组：

<li ng-repeat='message in messages | orderBy:"-stars.length"'>…</li>

如何向其添加调用message.hasStars() 的过滤器？我尝试了以下方法，但都没有效果：

message in messages | filter:message.hasStars() | orderBy:"-stars.length"
message in messages | filter:message:hasStars() | orderBy:"-stars.length"
message in messages | filter:message.hasStars | orderBy:"-stars.length"
message in messages | filter:message:hasStars | orderBy:"-stars.length"

【问题讨论】：

你需要一个自定义过滤器
@sza 这不是真的。请参阅“Jared 之类的词”的答案。
@jessegavin 这不过是一个过滤器。您可以使用filter 模块或仅使用函数来创建过滤器。
它是一个谓词函数，但它没有通过依赖注入器以角度注册为“过滤器”。

标签： javascript angularjs

【解决方案1】：

http://jsfiddle.net/DGKNN/

filter 期望有一个表达式可以计算为范围上的谓词。这是一个函数，它接受一个元素作为其参数，并返回该元素是否应该包含在集合中。

在您的控制器中：

$scope.hasStars = function (message) {
    return message.hasStars();
};

在你看来：

<li ng-repeat='message in messages | filter:hasStars | orderBy:"-stars.length"'>...</li>

【讨论】：

【解决方案2】：

我假设某个名为 mySrv 的服务将消息加载到您的控制器中。

myapp.controller('myCtrlr',['$scope','mySrv',function($scope,mySrv){
    $scope.messages = mySrv.getMessages();
}]); // end myCtrlr

myapp.filter('hasStars',function(){
    return function(msg){
        return msg.stars.length > 0;
    };
});

在模板中

<ul ng-controller="myCtrlr">
    <li ng-repeat="message in messages | hasStars | orderBy:"-stars.length">...</li>
</ul>

【讨论】：

您的意思是不要将消息放在 $scope 上吗？