AngularJs Entfernen Sie doppelte Elemente in ng-repeat

Habe ich ein Wörterbuch abgelegt ist, in field_detail

<li ng-repeat = "field in field_detail">{{field.displayName}}</li>

Nun möchte ich nicht zu gehören doppelte displayName von field_detail , was filter sollte ich verwenden?

InformationsquelleAutor der Frage Pawan | 2013-11-26

  1. 77

    Nur einen filter erstellen, wird die eindeutige Werte, die wahrscheinlich durch einen Schlüssel. So etwas tun sollte (von mir nicht getestet, daher lasse ich das Geschäft, Sie, dies ist nur um Ihnen eine Idee geben):

    app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });

      return output;
   };
});
    <div ng-repeat="item in items | unique: 'id'"></div>

    Hinweis: Array.indexOf() funktioniert nicht in IE8wenn Sie also Unterstützung IE8, müssen Sie die stub im indexOf(), oder müssen Sie mit einem etwas anderen Ansatz.

    Andere Gedanken: Es ist wahrscheinlich besser, nur einen filter zu erstellen, nutzt die einzigartige Funktion in lowdash oder Unterstrich, wenn Sie bereits verweisen auf die Bibliotheken.

    InformationsquelleAutor der Antwort Ben Lesh

  2. 14

    Arbeitete ich bis ein JSFiddle auf der Grundlage der Antwort von Ben Leine:

    http://jsfiddle.net/ThunderHemlock/bvsvzrr5/1/

    Dank, Ben. Andere Antworten erforderlich, die Verwendung von AngularJS UI oder andere zusätzliche frameworks.

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

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });
      return output;
   };
});

app.controller('MyCtrl', function ($scope) {

$scope.items = [
      {
        id : 1,
        column : "col1",
        comment : "col1-label1",
        text1 : "col1-label1-text1",
        checked: false,

      },
      {
        id : 2,
        column : "col1",
        comment : "col1-label2",
        text1 : "col1-label2-text1",
        checked: false,

      },
      {
        id : 3,
        column : "col2",
        comment : "col2-label1",
        text1 : "col2-label1-text1",
        checked: false,

      },
      {
        id : 4,
        column : "col2",
        comment : "col2-label2",
        text1 : "col2-label2-text1",
        checked: false,

      },
      {
        id : 5,
        column : "col3",
        comment : "col3-label1",
        text1 : "col3-label1-text1",
        checked: false,

      },
      {
        id : 6,
        column : "col3",
        comment : "col3-label2",
        text1 : "col3-label2-text1",
        checked: false,

      },
      {
        id : 7,
        column : "col4",
        comment : "col4-label1",
        text1 : "col4-label1-text1",
        checked: false,

      },
      {
        id : 8,
        column : "col4",
        comment : "col4-label2",
        text1 : "col4-label2-text1",
        checked: false,

      }
      ];
    });



<div ng-app="app">
        <div ng-controller="MyCtrl as item">
            <ul>
                <li ng-repeat="item in items | unique: 'column'">
                    {{ item.column }}
                </li>
            </ul>
        </div>
    </div>

    InformationsquelleAutor der Antwort Thunder Hemlock

  3. 3

    Zur piggyback-off von Ben Lesh, habe ich noch die option zum entfernen von doppelten Objekten in einem array, wenn der keyname ist falsy:

    app.filter('unique', function () {
return function ( collection, keyname) {
    var output = [],
        keys = []
        found = [];

    if (!keyname) {

        angular.forEach(collection, function (row) {
            var is_found = false;
            angular.forEach(found, function (foundRow) {

                if (foundRow == row) {
                    is_found = true;                            
                }
            });

            if (is_found) { return; }
            found.push(row);
            output.push(row);

        });
    }
    else {

        angular.forEach(collection, function (row) {
            var item = row[keyname];
            if (item === null || item === undefined) return;
            if (keys.indexOf(item) === -1) {
                keys.push(item);
                output.push(row);
            }
        });
    }

    return output;
};
});

    InformationsquelleAutor der Antwort Shawn Dotey

  4. 2

    Bekomme ich ein ticket sagen, wenn der Benutzer auf speichern klickt Sie erhalten eine Fehlermeldung besagt, dass Unique-Constraint-Verletzung, bla bla.. Sie wollen mein Bild, um Duplikate zu sein, bevor die Datenbank erzwingt die Einschränkung. Also schrieb ich eine Funktion um eine Schleife durch alle Instanzen des Arrays von Objekten und Anzahl der Instanzen.

    $scope.anyDuplicates = function () {
    var dupes = false;
    for (var i = 0; i < $scope.kpiList.length; i++) {
        $scope.kpiList[i].cnt = 0;

        for (var j = 0; j < $scope.kpiList.length; j++) {

            if ($scope.kpiList[i].description == $scope.kpiList[j].description) {
                $scope.kpiList[i].cnt++;
            }

            if ($scope.kpiList[i].cnt > 1) dupes = true;
        }
    }
    return dupes;
}

    ...und ich diese Funktion in mein script zu verhindern, dass das speichern so:

    if ($scope.anyDuplicates()) { 
   alert('Duplicates Detected.  Please remove the duplicates before pressing the save button.'); 
} else { 
   save();
}

    ...und um dem Benutzer zu zeigen, sobald Sie einen neuen Datensatz hinzufügen, wie dies:

    $scope.kpiList.push({kpiId: newId, description: newDescription, new: true});
$scope.anyDuplicates();

    ... und dann in meinem HTML habe ich etwas, um dem Benutzer mitzuteilen, wo das Duplikat ist...

    <tr ng-repeat="row in kpiList | filter:searchText | orderBy:['kpiTypeId', 'description'] ">
<td>
   <span 
      ng-show="row.cnt > 1" 
      style="color: red; font-size: xx-small">
      duplicate
   </span>
</td>
...
</tr>

    Ja, ich bin absichtlich Vergleich der einzelnen Instanz auf sich selbst. Es ist weniger code, der Weise. Ich überprüfen, um zu sehen, ob .cnt - > 1 > 0.

    Auch zur Kenntnis zu nehmen... die kpiList.cnt-Feld nicht vorhanden ist, bis die Funktion zum ersten mal ausgeführt wird. Die ng-show="Zeile.cnt - > 1" zeigen an, dass eine falsche (nicht truthy) und werden erst angezeigt, wenn eine Zeile.cnt hat einen Wert.

    Außerdem sollten Sie verwenden ein StyleSheet zur Formatierung des span, anstatt Sie in das style-Attribut.

    InformationsquelleAutor der Antwort D. Kermott

  5. 1

    Erstellen Sie Ihre eigene Funktion:

    productArray =[];
angular.forEach($scope.leadDetail, function(value,key){
var index = $scope.productArray.indexOf(value.Product);
if(index === -1)
{
    $scope.productArray.push(value.Product);
}

    });

    InformationsquelleAutor der Antwort Akhilesh Kumar

Schreibe einen Kommentar