web-dev-qa-db-fra.com

«ng-repeat» Comment obtenir les valeurs «uniques»

En utilisant un tableau, j'essaie de filtrer et d'afficher les informations unique dans la liste. Pour cela, j'utilise la méthode angular inbuild filter.

Mais je reçois une erreur.

Voici mon essai (je filtre par SubProjectName)

<ul>
    <li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
        {project.SubProjectName}}
    </li>
</ul>

Démo en direct

angularjsng-repeatangular-filters
11
3gwebtrain

AngularJS n'inclut pas de filtre unique par défaut. Vous pouvez utiliser celui de angular-filter . Il suffit d'inclure le JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

et incluez la dépendance dans votre application:

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

Votre code devrait fonctionner immédiatement! J'ai édité votre Plunker pour que ça marche.

20
muenchdo

Je pense que vous cherchez une réponse comme celle-ci

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

app.controller('MainCtrl', function($scope) {
  $scope.projectNames=projects
  $scope.Id = "1";
  $scope.SubProjectName="Retail Building";

})
.filter('unique', function() {
  return function(projects, subProjectName) {
    var newprojects =[];
    projects.forEach(function(project){
      if(project.SubProjectName === subProjectName)
        newprojects.Push(project);
    });
    return newprojects;
  };
});

<li ng-repeat="project in projectNames | unique:SubProjectName">{{project.SubProjectName}}</li>

Démo

5
Shamal Perera

Le filtre unique que vous essayez probablement d'utiliser provient d'AngularUI, vous devez donc l'inclure:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

et ajoutez-le comme dépendance de module:

var app = angular.module('plunker', ['ui.filters']);
3
Bohuslav Burghardt

J'ai mis à jour votre plunkr comme http://plnkr.co/edit/sx3u1ukH9752oR1Jfx6R?p=preview ajout d'une dépendance de filtre

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

J'espère que cela peut vous aider

1
Jayant Patil