从 Angular JS ng-options/ng-repeat 中删除重复项 [英] Removing duplicates from Angular JS ng-options / ng-repeat

问题描述

我有以下几点:

$scope.jsonmarkers = [{"name": "杰夫","type": "组织+培训实体",用户ID":1"}, {"name": "弗雷德","type": "组织+培训实体",用户ID":2"}];

这在我的 html 中:

<select id="typeselect" multiple ng-options="accnts.type for accnts in jsonmarkers" ng-model="accnt" ng-change="changeaccnt(accnt.type)"><<;/选择>

如何在 ng-options 中匹配类型并且每次出现只回显一次?

解决方案

要删除重复项，您可以使用 AngularUI 中的 unique 过滤器(源代码可在此处获得:AngularUI 唯一过滤器)并直接在 ng-options 中使用它(或 ng-repeat).

在此处查看更多信息:Unique &东西

json 结构也有语法错误.

工作代码

HTML

<div ng-controller="MainController"><select id="typeselect" ng-options="accnts.type for accnts in jsonmarkers | unique:'type'" ng-model="accnt" ng-change="changeaccnt(accnt.type)" multiple></选择>

脚本

 var app = angular.module("app", []);app.controller("MainController", function ($scope) {$scope.jsonmarkers = [{"name": "杰夫","type": "组织+培训实体",用户ID":1"}, {"name": "弗雷德","type": "组织+培训实体",用户ID":2"}];});app.filter('unique', function () {返回函数(项目，filterOn){如果(filterOn === false){退换货品;}if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {var hashCheck = {}, newItems = [];var extractValueToCompare = 函数(项目){如果 (angular.isObject(item) && angular.isString(filterOn)) {返回项目[filterOn];} 别的 {归还物品;}};angular.forEach(项目，功能(项目){var valueToCheck, isDuplicate = false;for (var i = 0; i < newItems.length; i++) {如果(angular.equals(extractValueToCompare(newItems[i])，extractValueToCompare(item))){isDuplicate = true;休息;}}如果(！isDuplicate){newItems.push(item);}});项目 = 新项目；}退换货品;};});

I have the following:

$scope.jsonmarkers = [{
    "name": "Jeff",
        "type": "Organisation + Training Entity",
        "userID": "1"
}, {
    "name": "Fred",
        "type": "Organisation + Training Entity",
        "userID": "2"
}];

And this in my html:

<select id="typeselect"  multiple  ng-options="accnts.type for accnts in jsonmarkers" ng-model="accnt" ng-change="changeaccnt(accnt.type)"></select>

How do I go about matching the type and only echoing it once per appearance in the ng-options?

解决方案

For removing duplicates you could use the unique filter from AngularUI (source code available here: AngularUI unique filter) and use it directly in the ng-options (or ng-repeat).

Look here for more: Unique & Stuff

Also there's a syntax error in json structure.

Working Code

Html

<div ng-app="app">
    <div ng-controller="MainController">
        <select id="typeselect"  ng-options="accnts.type for accnts in jsonmarkers | unique:'type'" ng-model="accnt" ng-change="changeaccnt(accnt.type)" multiple></select>
    </div>
</div>

script

    var app = angular.module("app", []);

app.controller("MainController", function ($scope) {
    $scope.jsonmarkers = [{
        "name": "Jeff",
            "type": "Organisation + Training Entity",
            "userID": "1"
    }, {
        "name": "Fred",
            "type": "Organisation + Training Entity",
            "userID": "2"
    }];
});


app.filter('unique', function () {

    return function (items, filterOn) {

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

        if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
            var hashCheck = {}, newItems = [];

            var extractValueToCompare = function (item) {
                if (angular.isObject(item) && angular.isString(filterOn)) {
                    return item[filterOn];
                } else {
                    return item;
                }
            };

            angular.forEach(items, function (item) {
                var valueToCheck, 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;
    };
});

这篇关于从 Angular JS ng-options/ng-repeat 中删除重复项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！