Angular ng-repeat for duplicates

Question

I use Angular, this is my view:

   <div class="col-sm-6" ng-repeat="contact in service.contacts">

    <label class="control-label mb10">{{contact.textDescription | decodeURIComponent}}</label>
               <select  multiple="multiple" selectize>
                   <option>{{contact.value}}</option>
              </select>

     </div>

I have one problem and I can't figure out a way to solve it. For contact.textDescription, I need to put only unique values, so if that contact.textDescription is duplicate, don't create field twice, but add that contact.value to options of that same contact.textDescription which already exists.. So, something like this:

if(contact.textDescription is duplicate) {
 contact.value.addTo(contact.textDescription which already exists)
}

Maybe some filter to apply or?

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

By the understanding of what you mentioned I think the filter mention in the following answer will help you to do what you want

Use this link to go to the question

edited May 23 '17 at 12:23

Community

1
1

answered Nov 28 '14 at 09:07

madu

344
3
14

score 0 · Answer 2 · answered Nov 28 '14 at 09:16

0

You can use ng-options to group and display unique value.

answered Nov 28 '14 at 09:16

Selvakumar

527
2
13

score 0 · Answer 3 · answered Nov 28 '14 at 22:20

You can use uniqFilter of angular-filter module.
Usage: collection | unique: 'property' or nested.property
Aliases: uniq

Example:
JS:

function MainController ($scope) {
  $scope.orders = [
    { id:1, customer: { name: 'John',    id: 10 } },
    { id:2, customer: { name: 'William', id: 20 } },
    { id:3, customer: { name: 'John',    id: 10 } },
    { id:4, customer: { name: 'William', id: 20 } },
    { id:5, customer: { name: 'Clive',   id: 30 } }
  ];
}

HTML:

<th>Customer list:</th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

RESULT:

Customer list:
- John 10
- William 20
- Clive 30

leobelizquierdo · Answer 4 · 2016-01-25T22:06:14.327

Grouping your contacts by textDescription should resolve your problem. Try something like this:

html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - GroupBy Filter</title>

    <script src="angular-1.4.7.min.js"></script>
    <script src="script.js"></script>

</head>
<body ng-app="app">
    <div ng-controller="MainController">
        <div ng-repeat="(key, contacts) in (service.contacts | groupBy: 'textDescription')">

            <label class="control-label">{{key}}</label>
            <select  multiple="multiple" selectize>
                <option ng-repeat="contact in contacts">{{contact.value}}</option>
            </select>
        </div>
    </div>
</body>

script.js:

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

app.controller("MainController", function ($scope) {
    $scope.service = {};
    $scope.service.contacts = [{
        "textDescription": "td1",
         "value": "1"
    }, {
        "textDescription": "td2",
         "value": "2"
    }, {
        "textDescription": "td3",
        "value": "3"
    }, {
        "textDescription": "td1",
        "value": "4"
    }, {
        "textDescription": "td3",
        "value": "5"
    }, {
        "textDescription": "td1",
        "value": "6"
    }];
});

app.filter('groupBy', function () {
    var results={};
    return function (data, key) {
        if (!(data && key)) return;
        var result;
        if(!this.$id){
            result={};
        }else{
            var scopeId = this.$id;
            if(!results[scopeId]){
                results[scopeId]={};
                this.$on("$destroy", function() {
                    delete results[scopeId];
                });
            }
            result = results[scopeId];
        }

        for(var groupKey in result)
            result[groupKey].splice(0,result[groupKey].length);

        for (var i=0; i<data.length; i++) {
            if (!result[data[i][key]])
                result[data[i][key]]=[];
            result[data[i][key]].push(data[i]);
        }

        var keys = Object.keys(result);
        for(var k=0; k<keys.length; k++){
            if(result[keys[k]].length===0)
                delete result[keys[k]];
        }
        return result;
    };
});

Now you have all the contacts grouped by textDescription, so the field for it (<label>) is created only once and the values are added to <option> tags

Angular ng-repeat for duplicates

4 Answers4