3

次の理論的なコードを実現したい:

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;
}

したがって、すべてのプレーヤーを Angular モデルにロードしたいのですが、名前が文字「A」で始まる DOM にのみプレーヤーをレンダリングしたいと考えています。このようなことをしようとすると、コンソールplayerは未定義であると通知します。これを (経由で) 達成するために、カスタム フィルタを作成する必要がありangular.module().filter()ますか?

4

3 に答える 3

7

ここに実用的なフィドルがあります：http://jsfiddle.net/orlenko/jV6DK/

Html コード (Karl 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;
    }
}

結果

于 2013-06-15T02:16:13.113 に答える
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;
    }
  } 

}

動作中の jsfiddle をチェックアウトする

于 2017-04-06T20:37:25.903 に答える