,可以通过以下步骤实现:
$scope.data = [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Apple' },
{ id: 4, name: 'Orange' },
{ id: 5, name: 'Banana' }
];
<ul>
<li ng-repeat="item in data | unique:'name'">{{ item.name }}</li>
</ul>
在上述代码中,'name'表示根据name属性进行唯一值过滤。
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;
};
});
在上述代码中,通过遍历collection数组,将唯一的值存储在output数组中,并使用keys数组来跟踪已经添加的唯一值。
这样,通过以上步骤,就可以在AngularJS中列出JSON数据中的唯一值了。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)。
腾讯云云服务器(CVM)产品介绍链接:https://cloud.tencent.com/product/cvm
腾讯云对象存储(COS)产品介绍链接:https://cloud.tencent.com/product/cos
领取专属 10元无门槛券
手把手带您无忧上云