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"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

HTML的{{1}}是：

ng-table

从上面的代码中，我生成了一个表格，我在“市场”栏中面临重复。该表看起来像：

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

正如你所看到的，印度尼西亚和马来西亚正在展示两次。请建议一种方法，以防止重复项显示在“市场”列中。

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重复的重复

3 个答案: