Javascript 使用Angular JS和Ionic动态插入JSON项

我一直在努力研究如何将JSON项插入到动态列表中：

我有一个json文件，看起来像：

[
{
"id":"34",
"City":"New York",
"Country":"USA"
},
{
"id":"22",
"City":"Las vegas",
"Country":"USA"
},
{
"id":"44",
"City":"Paris",
"Country":"France"
},
{
"id":"45",
"City":"Lyon",
"Country":"France"
}
]

我想这样表现：

这是我的密码：

<div ng-controller="customersCtrl"> 
<div class="list">
<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}
</div>
 <a class="item" href="#" ng-repeat="ci in cities" ng-if="c.Country == ci.Country"> {{ ci.City }} </a>
</div>

它是这样显示的：

---

这是由于第一个循环，列表中有4个项目，没有任何逻辑阻止列表在已写入的国家重复

问题

<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}

---

最简单的方法是预处理数据以显示数据的固有结构。然后可以使用嵌套的中继器

angular.module（'cityModule'，[]）。
控制器（'CityController'，['$scope'，
职能（$范围）{
var rawData=[{
“id”：“34”，
“城市”：“纽约”，
“国家”：“美国”
}, {
“id”：“22”，
“城市”：“拉斯维加斯”，
“国家”：“美国”
}, {
“id”：“44”，
“城市”：“巴黎”，
“国家”：“法国”
}, {
“id”：“45”，
“城市”：“里昂”，
“国家”：“法国”
}];
$scope.citiesByCountry={}；
对于（var i=0；i

{{country.name}
{{city.city}

<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}

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;
   };
});