3

Я хочу, чтобы достичь следующего теоретического кода:Расширенный AngularJS пользовательские фильтрации на ngRepeat объекты

VIEW.html

<li ng-repeat="player in players | filter:myCustomFilter(player)">{{player.name}} 

CONTROLLER.js

// some theoretical conditional statement that return a boolean 
$scope.otherCondition = true; 


$scope.myCustomFilter = function(player) { 
    return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition; 
} 

Так что я хочу, чтобы все мои игроки для загрузки в угловую модель, но я хочу только сделать игроков в DOM, имена которых начинаются с буквы «A». Когда я пытаюсь сделать что-то подобное, моя консоль сообщает мне, что player не определен. Нужно ли писать пользовательский фильтр для достижения этого (через angular.module().filter())?

ответ

7

Вот рабочая скрипку: http://jsfiddle.net/orlenko/jV6DK/

Html код (точно так, как предложил Карл Zilles):

<div ng-app> 
    <div ng-controller="MyController"> 
     <h2>Names starting with "A":</h2> 
     <ul> 
      <li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}</li> 
     </ul> 
     <h2>All Names:</h2> 
     <ul> 
      <li ng-repeat="player in players">{{player.name}}</li> 
     </ul> 
    </div> 
</div> 

Javascript:

function MyController($scope) { 
    $scope.players = [{ 
     name: 'Arthur'   
    }, { 
     name: 'William' 
    }, { 
     name: 'Bertha' 
    }, { 
     name: 'Alice' 
    }]; 

    $scope.otherCondition = true; 

    $scope.myCustomFilter = function(player) { 
     return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition; 
    } 
} 

Result

+0

Что делать, если мы хотим передать более 1 параметр для фильтра? –

2

Вам не нужно передать игроку фильтр

<li ng-repeat="player in players | filter:myCustomFilter">{{player.name}} 

Должно работать

0

ответам только частично правильным, если вам нужно передать больше аргументов функции вам нужно будет создать укупорочное и передать эти аргументы закрытия, как следующие:

'A' передается в замыкание, а player передается как часть контекста.

HTML:

<div ng-app> 
    <div ng-controller="MyController"> 
     <h2>Names starting with "A":</h2> 
     <ul> 
      <li ng-repeat="player in players | filter:myCustomFilter('A')">{{player.name}}</li> 
     </ul> 
     <h2>All Names:</h2> 
     <ul> 
      <li ng-repeat="player in players">{{player.name}}</li> 
     </ul> 
    </div> 
</div> 

JS:

function MyController($scope) { 
    $scope.players = [{ 
    name: 'Arthur' 
    }, { 
    name: 'William' 
    }, { 
    name: 'Bertha' 
    }, { 
    name: 'Alice' 
    }]; 

    $scope.otherCondition = true; 

    $scope.myCustomFilter = function(letter) { 
    return function(player) { 
     var rgxp = new RegExp(letter, "g"); 
     return player.name.substring(0, 1).match(rgxp) && $scope.otherCondition; 
    } 
    } 

} 

Checkout a working jsfiddle

Смежные вопросы