web-dev-qa-db-fra.com

Dans Angular, je dois rechercher des objets dans un tableau.

Dans Angular, j'ai dans la portée un objet qui retourne beaucoup d'objets. Chacun a un identifiant (celui-ci est stocké dans un fichier plat, donc pas de base de données, et il semble que je ne puisse pas utiliser l'utilisateur ng-resource)

Dans mon contrôleur:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

De mon point de vue, j’ai des informations supplémentaires sur le poisson caché par défaut avec le ng-show more, mais lorsque je clique sur le simple onglet Plus d’affichage, je voudrais appeler la fonction showdetails(fish.fish_id). Ma fonction ressemblerait à quelque chose comme:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

Maintenant dans la vue plus de détails apparaissent. Cependant, après avoir parcouru la documentation, je ne vois pas comment chercher dans ce tableau fish.

Alors, comment interroger le tableau? Et dans la console, comment appeler le débogueur pour avoir l’objet $scope avec lequel jouer?

javascriptangularjs
114
tspore

Je sais si cela peut vous aider un peu.

Voici quelque chose que j'ai essayé de simuler pour vous.

Commander le jsFiddle;)

http://jsfiddle.net/migontech/gbW8Z/5/

Création d'un filtre que vous pouvez également utiliser dans 'ng-repeat'

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

Utilisation dans le contrôleur:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

S'il y a des questions, faites le moi savoir.

95
migontech

Vous pouvez utiliser le service de filtre $ existant. J'ai mis à jour le violon ci-dessus http://jsfiddle.net/gbW8Z/12/

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

La documentation angulaire est ici http://docs.angularjs.org/api/ng.filter:filter

211
Adrian Gunawan

Pour ajouter à la réponse de @ migontech et à son adresse son commentaire selon lequel vous pourriez "probablement le rendre plus générique", voici une façon de le faire. Le ci-dessous vous permettra de rechercher par n'importe quelle propriété:

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

L'appel à filtrer deviendrait alors:

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

Remarque, j'ai supprimé l'opérateur unaire (+) pour permettre les correspondances basées sur des chaînes ...

22
herringtown

Une solution sale et facile pourrait ressembler

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};
13
Arun P Johny

Vos solutions sont correctes mais pas compliquées. Vous pouvez utiliser la fonction de filtre javascript pur . Ceci est votre modèle:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

Et voici votre fonction:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

Vous pouvez également utiliser l'expression:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

En savoir plus sur cette fonction: LINK

7
Michał Jarzyna

Angularjs a déjà une option de filtre pour le faire, https://docs.angularjs.org/api/ng/filter/filter

7
mdimran

Vu ce fil, mais je voulais rechercher des identifiants qui ne correspondaient pas à ma recherche. Code pour le faire:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);
4
Ogglas