angular中ng-repeat去重

最新推荐文章于 2021-03-13 04:00:31 发布

weixin_30575309

最新推荐文章于 2021-03-13 04:00:31 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zipon/p/5815237.html

本文介绍如何在AngularJS中实现一个自定义过滤器来去除数组中的重复项，并通过示例展示了如何针对对象数组进行去重操作。

[html] view plain copy print?在CODE上查看代码片派生到我的代码片
<div ng-app="myApp" ng-controller="myCtrl">  
    <p ng-repeat="x in items | unique:'id'">  
        {{x.id}}---{{x.name}}  
    </p>  
</div>  
<script>  
    //AngularJs 自定义过滤器  
    //1.使用过滤器，去除重复  
    angular.module('common', []).filter('unique', function () {  
        return function (collection, keyname) {  
            console.info(collection);  
            console.info(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;  
        }  
    });  
    var app = angular.module('myApp', ['common']);  
    app.controller('myCtrl', function ($scope) {  
        //$scope.items = [1, 2, 3,2];  
        //当前unique 的过滤只针对，对象数组过滤  
        $scope.items = [  
            { id: 1, name: 'zhangsan' },  
            { id: 2, name: 'lisi' },  
            { id: 1, name: 'zhangsan' },  
        ];  
    });  
</script>

转载于:https://www.cnblogs.com/zipon/p/5815237.html