How can I call a function in a NG-repeat

Question

I have a little problem, i wish to call a function within ng-repeat and not like this example, the fucntion remove duplicate value, but it doesn't work as i wish, i mean it remove duplicate from the string and not from the loop.

This is the HTML code, the "UNIQUE" function is to remove duplicate contents.

<tr ng-repeat="compet in discipline.compets">
    <td class="col-sm-2 feiCenterAlign"><label>{{unique(compet.eventCode)}}</label></td>   <td class="col-sm-2 feiCenterAlign"><div class="col-sm-8 col-sm-offset-2"><input type="number" ax-numeric-integer class="form-control input-sm" ng-model="compet.fhi.presented"></div></td>
    <td class="col-sm-2 feiCenterAlign"><div class="col-sm-8 col-sm-offset-2"><input type="number" ax-numeric-integer class="form-control input-sm" ng-model="compet.fhi.box"></div></td>
    <td class="col-sm-2 feiCenterAlign"><div class="col-sm-8 col-sm-offset-2"><input type="number" ax-numeric-integer class="form-control input-sm" ng-model="compet.fhi.notAccepted"></div></td>
    <td class="col-sm-2 feiCenterAlign"><div class="col-sm-8 col-sm-offset-2"><input type="number" ax-numeric-integer class="form-control input-sm" ng-model="compet.fhi.withdrawn"></div></td>
    <td class="col-sm-2 feiCenterAlign"><div class="col-sm-8 col-sm-offset-2"><input type="number" ax-numeric-integer class="form-control input-sm" ng-model="compet.fhi.accepted"></div></td>
</tr>

And this is the "UNIQUE" function code .

unique: function(array) { 
        var len = array.length; 
        var out = [];
        var obj = {};
        for (var i = 0; i < len; i++) {
            obj[array[i]] = 0;

        }
        for (var j in obj) { 
            out.push(j);
        }

        return out;
    },

thanks so much for your helps

PS : this is a link for a screenshot : hpics.li/d44d002 . the RED cercle is the "compet.eventCode" . the GREEN cercle is the value, and i want to display only once every duplicated value.

Answer 1

Angular UI has a filter for removing duplicates :

<tr ng-repeat="compet in discipline.compets | unique:'field name'">

Edit: This is kind of reinventing the wheel, but since you can't add the Angular UI library to your project, you can manually add the unique filter (from original Angular UI source code):

'use strict';

/**
 * Filters out all duplicate items from an array by checking the specified key
 * @param [key] {string} the name of the attribute of each object to compare for uniqueness
 if the key is empty, the entire object will be compared
 if the key === false then no filtering will be performed
 * @return {array}
 */
angular.module('myApp', []).filter('unique', ['$parse',
    function ($parse) {

        return function (items, filterOn) {

            if (filterOn === false) {
                return items;
            }

            if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                var newItems = [],
                    get = angular.isString(filterOn) ? $parse(filterOn) : function (item) {
                        return item;
                    };

                var extractValueToCompare = function (item) {
                    return angular.isObject(item) ? get(item) : item;
                };

                angular.forEach(items, function (item) {
                    var isDuplicate = false;

                    for (var i = 0; i < newItems.length; i++) {
                        if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                            isDuplicate = true;
                            break;
                        }
                    }
                    if (!isDuplicate) {
                        newItems.push(item);
                    }

                });
                items = newItems;
            }
            return items;
        };
    }
]);

Answer 2

The ng-repeat directive will display what is in the model. Therefore you want to change the model. I forget where I came across this clever code ( IT IS NOT MINE ).

Array.prototype.unique = function () {
    return (this.reduce(function(previousValue, currentValue, index, array) {
    return (Array.isArray(previousValue) ? (previousValue.indexOf(currentValue) < 0 ? previousValue.concat(currentValue) : previousValue) : [ previousValue ]);
  }));
};

Here is an example that uses the above function and a button to display a unique model or not. If you only want to display a unique array it might be worth making the array unique when you receive it.

$http.get('/aurl').success(function (data, status) {
  $scope.data = data.unique();
});