Question

module ngrFilter{
    'use strict';

    export class UsersCtrl {

        public userCollection: any[];
        public userFilter: string;

        constructor(){
            this.userCollection = [{id:1,name:'John',surname:'Klopper'},
                                   {id:2,name:'Mary',surname:'Schoeman'}];
        }

        public filterUser(user){
            //The this is undefined when using as a custom filter for ng-repeat
            console.log(this.userFilter)

            if(user.name == this.userFilter ||
               user.surname == this.userFilter){
              return true;
            }  
        }
    }

    angular
        .module('ngrFilter',[])
        .controller('UsersCtrl', UsersCtrl);
}

在ng-repeat中使用自定义过滤器时，filterUser方法中未定义this属性。有没有办法让这个过滤器工作，或者我只是在做一些愚蠢的事情。

我还尝试在此处添加代码示例：http://fiddlesalad.com/typescript/custom-ngrepeat-filter/

Answer 1

使用公共字段作为过滤函数，而不是方法，可以为此创建一个闭包。

export class UsersCtrl {
    public userCollection: any[];
    public userFilter: string;
    public filterUser: (User) => boolean;

    constructor(){
        this.userCollection = [{id:1,name:'John',surname:'Klopper'},
                               {id:2,name:'Mary',surname:'Schoeman'}];
        var self = this;
        this.filterUser = function(user:User) {
            return self./*...*/;      
        }
    }
}

Answer 2

您尝试做的事情可以通过angular filter

完成

对于你想要做的事情，我只会处理一个事件并在更改过滤器时重新绑定列表

export class UsersCtrl {

    public userCollection: any[];
    public filteredUserCollection: any[];
    public userFilter: string;

    constructor(){
        this.userCollection = [{id:1,name:'John',surname:'Klopper'},
                               {id:2,name:'Mary',surname:'Schoeman'}];
        this.filteredUserCollection = this.userCollection;
    }

    public filterChanged(filter){
        this.filterUser(filter);
    }

    public filterUser(filter){
        var results = [];
        if(user.name == filter ||
           user.surname == filter){
          results.push(user);
        }
        this.filteredUserCollection = results;
    }
}

然后您的标记将更改为：

<input ng-model="users.userFilter" ng-change="users.filterChanged(users.userFilter)">
<ul>
    <li ng-repeat="user in users.filteredUserCollection">
        {{user.name}} {{user.surname}}
    </li>
</ul>

作为ng-repeat自定义过滤器的Typescript方法不按预期运行

2 个答案: