防止两个不同的 ng-repeats 重复

Question

我正在研究 ng-table 并面临一个问题，我需要防止通过两个不同的 ng-repeats 显示重复项。

JSON 层次结构是这样的：

{
    "PageSize": 10,
    "TotalRecords": 54,
    "Users": [
        {
            "ID": 1,
            "FirstName": "John",
            "LastName": "Doe",
            "Projects": [
                {
                    "Id": 1,
                    "Name": "Asean",
                    "Categories": [
                        {
                            "Id": 1,
                            "Name": "Category1",
                            "Markets": [
                                {
                                    "Id": 2,
                                    "Name": "Indonesia"
                                },
                                {
                                    "Id": 4,
                                    "Name": "Malaysia"
                                }
                            ]
                        },
                        {
                            "Id": 2,
                            "Name": "Category2",
                            "Markets": [
                                {
                                    "Id": 2,
                                    "Name": "Indonesia"
                                },
                                {
                                    "Id": 4,
                                    "Name": "Malaysia"
                                },
                                {
                                    "Id": 7,
                                    "Name": "Japan"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

ng-table 的 HTML 是：

<table class="table" ng-table="tableParams" id="relationTable">
    <tr ng-repeat="mapping in $data">
        <td class="text-left" data-title="'User'">{{mapping.FirstName}}</td>
        <td class="text-left" data-title="'Category'"><span ng-repeat="category in mapping.Projects[0].Categories track by $index">{{category.Name}}{{$last ? '' : ', '}}</span></td>
        <td class="text-left" data-title="'Market'"><span ng-repeat="category in mapping.Projects[0].Categories track by $index"><span ng-repeat="market in category.Markets track by $index">{{market.Name}}{{$last ? '' : ', '}}</span>{{$last ? '' : ', '}}</span></td>
    </tr>
</table>

从上面的代码中，我生成了一个 table，其中我在 'Markets' 列中面临重复项。 table 看起来像：

+------+----------------------+-------------------------------------------------+
|_Name_|______Categories______|_____________________Markets_____________________|
+------+----------------------+-------------------------------------------------+
|_John_|_Category1,_Category2_|_Indonesia,_Malaysia,_Indonesia,_Malaysia,_Japan_|
+------+----------------------+-------------------------------------------------+

如您所见，此处显示了两次印度尼西亚和马来西亚。请建议我可以防止重复项显示在 'Markets' 列中的方法。

Answer 1

使用， <span ng-repeat="market in category.Markets track by $index | unique:'Name'">{{market.Name}}{{$last ? '' : ', '}}</span>{{$last ? '' : ', '}}</span>

（源代码：unique filter）

Answer 2

快速修复试试这个。稍后我将添加更多内容。但我无法测试这个。由你决定。 Sample

<div ng-repeat="item in items | unique: 'id'"></div>

app.filter('unique', function() {
return function(collection, keyname) {
  var output = [], 
      keys = [];

  angular.forEach(collection, function(item) {
      var key = item[keyname];
      if(keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);
      }
  });
  return output;
 };
});

Answer 3

我已经通过创建一个非常简单的 AngularJS 过滤器为您完成了需要的工作。

angular.module('ui.bootstrap.demo').filter('unique',function(){

  var sub=[];
  var flag=false;
  var result="";
  return function(input){

    for(var i=0;i<sub.length;i++){
      console.log('inside for loop');
      if(input==sub[i])
      {
        flag=true;
        break;
      }


    }
    if(flag){
      result="";
      flag=false;
      return result;
    }
    else{
      sub.push(input);
      result=input;
    }
    return result;

  };

});

您需要更改一些 HTML 代码，将 {{market.Name}} 替换为 {{market.Name | unique }}

here is the plunkr

防止两个不同的 ng-repeats 重复

Prevent duplicates in two different ng-repeats

jquery

angularjs

angularjs-ng-repeat

ngtable