AngularJS使用自定义过滤功能多个过滤 [英] AngularJS multiple filter with custom filter function

问题描述

我想筛选具有多个过滤器+使用自定义过滤功能列表。

原来工作的jsfiddle例子是 http://jsfiddle.net/ed9A2/1/ ，但现在我想改变年龄的方式正在过滤器。

我要添加自定义过滤器，以便年龄其过滤​​器的基础上为 MIN_AGE 和 MAX_AGE ，（与年龄两个输入值）。

寻找到文档后。我发现人有类似的问题和用户马克Rajcok答案<一个href=\"http://docs.angularjs.org/api/ng.filter:filter#comment-648569667\">http://docs.angularjs.org/api/ng.filter:filter#comment-648569667看起来不错，应该工作。但我有申请到我的codeS，主要似乎是因为我有其他多个过滤器的问题。

林很新的AngularJS：（

我试过和不工作的小提琴是在这里 http://jsfiddle.net/ed9A2/20/

我不工作$ C $的复制粘贴CS在这里

查看

 ＆LT; D​​IV NG-NG应用程序控制器=MainController＆GT;
＆LT;表类=fancyTable＆GT;
    ＆所述; TR＆GT;
        ＆LT;第i个玩家ID＆LT; /第i
        ＆LT;第i个球员的名字和LT; /第i
        ＆LT;第i年龄和LT; /第i
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;＆LT;输入NG模型=player_id/＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;输入NG模型=PLAYER_NAME/＆GT;＆LT; / TD＆GT;
        ＆所述; TD＆GT;
            年龄下限：其中，输入NG模型=MIN_AGE/＆GT;
            最大年龄：其中，输入NG模型=MAX_AGE/＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; TR NG重复=球员在球员|过滤器：{ID：player_id，名称：PLAYER_NAME，年龄：ageFilter}＆GT;
        ＆所述; TD＆GT; {{player.id}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{player.name}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{player.age}}＆下; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

控制器

 函数MainController（$范围）{$ scope.player_id =;
$ scope.player_name =;
$ scope.player_age =;
$ scope.min_age = 0;
$ scope.max_age = 999999999;$ scope.ageFilter =功能（播放器）{
    回报（播放器和GT; $ scope.min_age＆放大器;＆安培; player.age＆LT; $ scope.max_age）​​;
}$ scope.players = [
        {名：罗德·拉沃
            ID：棒，
            日期：1938年8月9日
            图片网址：IMG /棒laver.gif，
            时代：75}，
        {名：贝克尔
            ID：borix
            日期：1967年11月22日
            图片网址：IMG /鲍里斯 -  becker.gif
            时代：45}，
        {名：约翰·麦肯罗
            ID：麦肯罗
            日期：1959年2月16日
            图片网址：IMG /约翰-MC-enroe.gif
            时代：54}，
        {名：纳达尔
            ID：纳达尔
            日期：1986年5月24日
            图片网址：IMG / ndl.jpg，
            时代：27}
    ]
}
 

解决方案

试试这个：

 ＆LT; TR NG重复=球员在球员|过滤器：{ID：player_id，名称：PLAYER_NAME} |过滤器：ageFilter＆GT;$ scope.ageFilter =功能（播放器）{
    回报（player.age＆GT; $ scope.min_age＆放大器;＆安培; player.age＆LT; $ scope.max_age）​​;
}
 

I am trying to filter the list with multiple filters + with a custom filter function.

The original working jsfiddle example is http://jsfiddle.net/ed9A2/1/ but now I want to change the way age are being filter.

I want to add a custom filter so that age it filter based on two input value which is min_age and max_age , (between age) .

After looking into doc. I found people having similar questions and a user Mark Rajcok answer http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 looks good and should be working. But I am having problem applying it into my codes which mainly seems to because I have other multiple filters.

Im very new to AngularJS :(

My tried and NOT working fiddle is here http://jsfiddle.net/ed9A2/20/

A copy paste of my NOT working codes are here

View

<div ng-app ng-controller="MainController">
<table class="fancyTable">
    <tr>
        <th>Player id</th>
        <th>Player name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td><input ng-model="player_id" /></td>
        <td><input ng-model="player_name" /></td>
        <td>
            Min Age:<input ng-model="min_age" />
            Max Age:<input ng-model="max_age" />
        </td>
    </tr>
    <tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}">
        <td>{{player.id}}</td>
        <td>{{player.name}}</td>
        <td>{{player.age}}</td>
    </tr>
</table>

Controller

function MainController($scope) {

$scope.player_id = "";
$scope.player_name = "";
$scope.player_age = "";
$scope.min_age = 0;
$scope.max_age = 999999999;

$scope.ageFilter = function(player) {
    return ( player > $scope.min_age && player.age < $scope.max_age);
}

$scope.players = [
        {"name": "Rod Laver",
            "id": "rod",
            "date": "1938/8/9",
            "imageUrl": "img/rod-laver.gif",
            "age": 75},
        {"name": "Boris Becker", 
            "id": "borix",
            "date": "1967/11/22",
            "imageUrl": "img/boris-becker.gif",
            "age": 45},
        {"name": "John McEnroe",
            "id": "mcenroe",
            "date": "1959/2/16",
            "imageUrl": "img/john-mc-enroe.gif",
            "age": 54},
        {"name": "Rafa Nadal",
            "id": "nadal",
            "date": "1986/5/24",
            "imageUrl": "img/ndl.jpg",
            "age": 27}
    ]
}

解决方案

Try this:

<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter">

$scope.ageFilter = function (player) {
    return (player.age > $scope.min_age && player.age < $scope.max_age);
}

这篇关于AngularJS使用自定义过滤功能多个过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！