如何使用ng-repeat显示唯一值?

时间:2018-01-31 02:40:39

标签: javascript angularjs

使用AngularJS,我尝试仅显示一次数据库中的项目link.DocCategorylink.DocSubCategory。使用| unique: 'DocCategory'没有给出我预期的结果,因为它实际显示DocCategory一次,但也删除了共享相同DocCategory的其他实例。我希望DocCategory一次显示与DocSubCategory相关的URL项,其相关{ "d": { "results": [{ "URL": { "Description": "Capabilities", "Url": "https://www.test.com" }, "Comments": null, "DocCategory": "The LIFE Links", "DocSubCategory": "The Sales Program", "Order0": 1, "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the capabilities that we have to offer.</p></div>", "Name": "Capabilities", "ID": 1 }, { "URL": { "Description": "Abilities", "Url": "https://www.test2.com" }, "Comments": null, "DocCategory": "The LIFE Links", "DocSubCategory": "The Sales Program", "Order0": 1, "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>", "Name": "Capabilities", "ID": 1 } ]} } 信息显示一次。

这是我的JSON结构:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6" ng-repeat= "link in links | unique:'DocCategory'">
          <h1 class="category">{{link.DocCategory}}<h1>
          <h2 class="subcategory"><span class="subcatspan">{{link.DocSubCategory}}</span></h2>
          <a class="links" href={{link.URL.Url}} target="_blank">{{link.URL.Description}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的HTML:

char[] charsInString = s.toCharArray();

int length = 0;
for (int i = 0; i < charsInString.length; i++) {
    if (!(charsInString[i] < 65 || charsInString[i] > 122))
        length++;
}

char[] newCharList = new char[length];
for (int i = 0; i < charsInString.length; i++) {
    // not sure what to do here?
}

编辑:我试图在视图中隐藏重复的项目,而不是完全删除它们。

1 个答案:

答案 0 :(得分:0)

你需要使用'grouBy'和angular-filter

<强>样本

var app = angular.module('test',['angular.filter'])
app.controller('testCtrl',function($scope){
  $scope.data= {
  "d": {
    "results": [{
      "URL": {
        "Description": "Capabilities",
        "Url": "https://www.test.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "first",
      "Name": "Capabilities",
      "ID": 1
    }, {
      "URL": {
        "Description": "Abilities",
        "Url": "https://www.test2.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }
  ]}
};
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>

<body ng-app='test' ng-controller='testCtrl'>
 <div class="row" ng-repeat="log in data.d.results | groupBy: 'DocCategory'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>DocSubCategory</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log" >
                        <td>{{item.DocSubCategory }}</td>
                        <td>{{item.Description}}</td>
                        
                    </tr>
                </tbody>
            </table>
        </div>
</body>