【问题标题】:Angularjs ng-repeat filtered by one property, property duplicate issueAngularjs ng-repeat 被一个属性过滤,属性重复问题
【发布时间】:2016-02-23 10:33:52
【问题描述】:

我想按球队过滤我的数组并显示每支球队中的所有球员,但如果球队的名称相似,例如。 'team beta' 和 'team beta z' 出现重复问题。 球员同时出现在两支球队中...

这里是示例代码: https://jsfiddle.net/lukasz9999/qpqsuvc5/1/

我认为问题在于过滤方法

<div ng-repeat="playerPerTeam in playersToFilter() | filter:filterTeams">
   <b>{{playerPerTeam.team}}</b>

<li ng-repeat="player in players | filter:{team: playerPerTeam.team} | filter:searchFilter">{{player.name}}</li>        
</div>


$scope.players = [{name: 'Gene', team: 'team alpha'},
                {name: 'George', team: 'team beta'},
                {name: 'Steve', team: 'team gamma'},
                {name: 'Paula', team: 'team beta'},
                {name: 'Paula2', team: 'team beta z'},
                {name: 'Scruath of the 5th sector', team: 'team gamma'}];



var indexedTeams = [];

$scope.playersToFilter = function() {
    indexedTeams = [];
    return $scope.players;

}

$scope.filterTeams = function(player) {

    var teamIsNew = indexedTeams.indexOf(player.team) == -1;
    console.log("nt "+teamIsNew)
    if (teamIsNew) {
        indexedTeams.push(player.team);
    }
    return teamIsNew;
}
  • 此代码生成此列表:
  • 团队阿尔法
    • 基因
  • 团队测试版
    • 乔治
    • 宝拉
    • 保拉2
  • 团队伽玛
    • 史蒂夫
    • 第五区的斯克鲁斯
  • 团队测试版 z
    • 保拉2

name:Paula2 应该只在“team beta z”中,但也应该在“team beta”中。

感谢您的建议

【问题讨论】:

    标签: javascript angularjs ng-repeat


    【解决方案1】:

    true 放在过滤器语句之后就可以了。所以,

    filter:{team: playerPerTeam.team}
    

    应该是

    filter:{team: playerPerTeam.team}:true
    

    用于完全匹配。 https://docs.angularjs.org/api/ng/filter/filter

    你可以看到plunker

    【讨论】:

      【解决方案2】:

      您必须在使用的 ng-repeat="" 末尾使用 track by $index

      通过这样做,angular 用它们在数组中的索引而不是它们的值来标识元素。

      例子:

      ng-repeat="playerPerTeam in playersToFilter() | filter:filterTeams track by $index"

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-06-21
      • 2014-01-30
      • 1970-01-01
      • 1970-01-01
      • 2014-05-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多