Question

我有一点问题，我希望在ng-repeat中调用一个函数，而不是像这个例子，fucntion删除重复值，但它没有按照我的意愿工作，我的意思是删除重复字符串而不是循环。

这是HTML代码，＆＃34; UNIQUE＆＃34;功能是删除重复的内容。

<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>

这就是＆＃34; UNIQUE＆＃34;功能代码。

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;
    },

非常感谢你的帮助

PS：这是截图的链接：hpics.li/d44d002。 RED cercle是＆＃34; compet.eventCode＆＃34; 。 GREEN cercle是值，我希望每个重复值只显示一次。

Answer 1

Angular UI有一个filter for removing duplicates：

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

编辑：这有点重新发明轮子，但由于您无法将Angular UI库添加到项目中，您可以手动添加unique过滤器（来自原始Angular） UI源代码）：

'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

ng-repeat指令将显示模型中的内容。因此，您想要更改模型。我忘了我遇到这个聪明的代码（它不是我的）。

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 ]);
  }));
};

以下是使用上述功能的an example和一个显示独特模型的按钮。如果您只想显示一个唯一的数组，那么在收到它时可能值得使该数组唯一。

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

如何在NG重复中调用函数

2 个答案: