Angularjs ng-repeat按一个属性过滤，属性重复问题

Angularjs ng-repeat filtered by one property, property duplicate issue

本文关键字：属性 过滤 问题 一个 ng-repeat Angularjs      更新时间：2023-09-26

我想按团队过滤我的数组并显示每个团队中的所有玩家，但如果团队的名称相似，例如。出现"团队测试版"和"团队测试版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

名称：Paula2应该只在"团队beta z"中，但也在"团队测试"中。

谢谢你的任何建议

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

filter:{team: playerPerTeam.team}

应该是

filter:{team: playerPerTeam.team}:true

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

你可以看到普朗克

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

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

例：

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

相关文章：