Remove duplicates from array directive

Question

I have a div which shoes the names. I want to remove the duplicates in my array. I have done this with filter, but i want to know how we can extend this to build a directive.

<div ng-controller="MainController">
        <ul>
            <li ng-repeat="name in names | unique">
                {{name}}
            </li>   
        </ul>
</div>

Below is the filter code.

angular.module('app')
    .controller('MainController', ['$scope', function($scope){
        $scope.names = ['a','b','c','d','a','c'];
    }])
    .filter('unique', function(){
        return function(names){
            var obj = {};
            names.forEach(function(name){
                obj[name] = null;
            })
            return Object.keys(obj);
        }
    })
    .directive('unique', function(){
        return {
            link: function(scope, elem, attr){

            }
        }
    })

How can i build a directive which removes duplicates from my array.

@PSL: I am interested to know how you could do the same with directive. What would the directive return etc.... — Shane
– Shane, Commented Jan 8, 2015 at 20:40
It does not make sense actually to do it in a directive to transform the data that is exactly what filters are for... Or are you looking for something more than just transforming the data? — PSL
– PSL, Commented Jan 8, 2015 at 20:40
@PSL: I am just looking to remove the duplicates alone, i know filters are for that purpose.. just interested... to know. — Shane
– Shane, Commented Jan 8, 2015 at 20:42
To compare objects, arrays, etc, angular have the angular.equals(o1, o2); function. And to delete, use delete names[names.indexOf(name)];. — klauskpm
– klauskpm, Commented Jan 8, 2015 at 20:42

benri · Accepted Answer · 2015-01-08 22:48:42Z

1

Here's how I would write it:

angular.module('app')
    .controller('MainController', ['$scope', function($scope){
        $scope.names = ['a','b','c','d','a','c'];
    }])
    .directive('uniqueArray', function(){
        return {
            restrict: 'E',
            scope: {
                arr: '='
            }
            template: '<ul><li ng-repeat="item in unique_arr">{{item}}</li></ul>',
            controller: function($scope){

                function get_unique(items){
                    var obj = {};
                    angular.forEach(items, function(item){
                        obj[item] = null;
                    });
                    return Object.keys(obj);
                }

                $scope.unique_arr = get_unique($scope.arr);
            }
        }
    })

and in the HTML:

<unique-array arr="names"></unique-array>

I think a directive is unnecessary as though as it's basically acting as a wrapper

answered Jan 8, 2015 at 22:48

benri

1616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shane Over a year ago

Can you help me in this thread? stackoverflow.com/questions/28035944/…

Collectives™ on Stack Overflow

Remove duplicates from array directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related