Angularjs使用Union过滤列表

时间:2013-05-15 18:22:45

标签: angularjs

我有一个属于独特团队的玩家列表。我想创建一个过滤器,触发按钮过滤列表由2个团队制作联盟列表,即

"Players": [
  {
    "Name": "Aron Baynes",
    "TeamName": "San Antonio Spurs",
    "TeamID": "4fd03d4e1c73bc0a74b81f24",
   },
  {
    "Name": "Michael Jordan",
    "TeamName": "Chicago Bulls",
    "TeamID": "4fd03d4e1c73bc0a74b81f18",
  },
  {
    "Name": "Tim Duncan",
    "TeamName": "Los Angeles Lakers",
    "TeamID": "4fd03d4e1c73bc0a74b81f11",
  },
  {
    "Name": "Stephen Jackson",
    "TeamName": "Miami Heat",
    "TeamID": "4fd03d4e1c73bc0a74b81f15",
  }]

我是角度新手,所以我想出了4种搜索网页的方法但是这些东西都没有在我的HTML中我有一个带游戏的按钮让我们说芝加哥@迈阿密当你按下它应该只过滤两个球员(乔丹和杰克逊)的名单使用Json在一个统一的名单上方,就像在一个查询中得到所有拥有芝加哥或迈阿密队的球员。我知道必须创建一个自定义过滤器,但是一旦创建它就可以从按钮调用如何影响ng-repeat?按钮可以提供主队和客队的信息。

1 个答案:

答案 0 :(得分:1)

您需要创建两个可供ng-repeat | filter使用的范围项。当您通过ng-click点击按钮时,您可以设置这些scope值。

<ul>
    <li ng-repeat="player in players | filter:filterFunction">{{player.Name}}</li>
</ul>
<button ng-click="setTeams('Chicago Bulls', 'Miami Heat')">Click</button>
<button ng-click="setTeams('', '')">Reset</button>


$scope.setTeams = function (homeTeam, awayTeam) {
    $scope.homeTeam = homeTeam;
    $scope.awayTeam = awayTeam;
};
$scope.filterFunction = function (item) {
    if ($scope.homeTeam && $scope.awayTeam) {
        if (item.TeamName == $scope.homeTeam || item.TeamName == $scope.awayTeam) {
            return item;
        }
    } else {
        return item;
    }
};