javascript - 如何不显示重复值 Ng-repeat Angular JS

Question

我正在寻找一种方法来避免在 Angular JS 中使用 ng-repeat 时显示重复值。

我有一个 JSON 列表，如下所示:

[
{
"Country":"Algeria",
"Value":"200"
},
{
"Country":"France",
"Value":"300"
},
{
"Country":"France",
"Value":"600"
},
]

和我的 JS 代码来显示国家:

<a class="item" href="#" ng-repeat="item in items">
    {{ list.country }}
  </a>

是否可以使用 ng-if 或任何条件代码来不显示重复项？

仅显示:在我的例子中是 Algolia 法国

Answer 1

最好的解决方案是在模板化之前清理数据，特别是如果您希望 France 值为 900(添加两个重复值)。

---

如果你只想显示两个重复项中的一个，你可以使用一个独特的函数，例如:https://lodash.com/docs#uniq

或者使用原生 javascript :

在你的 javascript 中:

var values = [ {
    "Country": "Algeria",
    "Value": "200"
}, {
    "Country": "France",
    "Value": "300"
}, {
    "Country": "France",
    "Value": "600"
} ];

function onlyUnique( value, index, self ) {
    return self.indexOf( value ) === index;
}

var uniqueValues = values.filter( onlyUnique );

在你的模板中:

<a class="item" href="#" ng-repeat="value in uniqueValues">
    {{ value.country }}
</a>

---

但是如果你仍然想在模板中这样做，你可以检查迭代的索引是否与数组中项目的索引相同:

<a class="item" href="#" ng-repeat="item in items" ng-if="$index === items.indexOf(item)">
    {{ list.country }}
</a>