Question

我有一个像这样的json文件：

[
  {
    "id": "1",
    "name": "John",
    "country": "Philippines"
  },

  {
    "id": "2",
    "name": "Marsha",
    "country": "Philippines"
  },
  {
   "id": "3",
    "name": "Peter",
    "country": "Philippines"
  },
  {
    "id": "4",
    "name": "Kang",
    "country": "Philippines"
  }
]

我想要的是使用ng-repeat显示它，但由于所有国家/地区都相同，我只想显示一次国家/地区。我怎么可能这样做？我的html文件就像：

<div ng-repeat="item in citizens">
    <label class="col-md-4 control-label" ng-model="item.id">
        {{item.id}}
    </label>
     <label class="col-md-4 control-label" ng-model="item.name">
        {{item.name}}
    </label>
     <label class="col-md-4 control-label" ng-model="item.country">
        {{item.country}}
    </label>
</div>

感谢您的帮助。

Answer 1

尝试按以下方式更改标签：

<label class="col-md-4 control-label" ng-model="item.country" ng-show="$index>0 && item.country!=citizens[$index-1].country">
    {{item.country}}
</label>

ng-show将检查上一个项目的国家/地区是否与当前项目的国家/地区不同，然后仅显示标签。 注意： $index>0将确保跳过此检查的第一项。

Answer 2

在我们显示国家/地区名称的标签上添加ng-if条件。

   <label class="col-md-4 control-label" ng-bind = "item.country" 
   ng-model="item.country" ng-if="$index>0 && item.country!=citizens[$index-1].country">
  </label>

这里是plunker example

Answer 3

为了达到要求，您必须在角度ng-repeat中使用过滤器组。

我附上了与

一起剪断的代码

<div ng-repeat="(key, value) in citizens | groupBy: 'country'">
    Group name: {{ key }}
    <div ng-repeat="item in value">
        <div>Name: {{ item.name }}</div>
    </div>
</div>

您还必须在脚本中包含角度过滤器文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>

同样在你的屁股中注入角度过滤依赖

angular.module('myApp', ['angular.filter']);

我认为这就是你要找的东西。有关详细信息，请查看this

以ng-repeat显示数据一次

3 个答案: