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或任何条件代码来显示重复的项目？

仅显示：阿尔及利亚法国在我的例子中

Answer 1

最佳解决方案是在模板化之前清理数据，特别是如果您希望法国值为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>

Answer 2

你可以试试这个：http://angular-ui.github.io/ui-utils/

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

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

2 个答案: