Comment filtrer (clé, valeur) avec ng-repeat dans AngularJs?

Je suis en train de faire quelque chose comme :

<div ng-controller="TestCtrl">
    <div ng-repeat="(k,v) in items | filter:hasSecurityId">
        {{k}} {{v.pos}}
    </div>
</div>

AngularJs Partie:

function TestCtrl($scope) 
{
    $scope.items = {
                     'A2F0C7':{'secId':'12345', 'pos':'a20'},
                     'C8B3D1':{'pos':'b10'}
                   };

    $scope.hasSecurityId = function(k,v)
    {
       return v.hasOwnProperty('secId');
    }
}

Mais de toute façon, il me montre tous les éléments. Comment puis-je filtrer (clé,valeur) ?

veuillez fournir des exemples de données pour les éléments. Ou de nous donner un violon 😉
Ce n'est pas une façon de créer un filtre de regarder les documentation, et en tant que Robin a dit, un exemple s'il vous plaît.
J'ai déjà donné un exemple complet et je sais comment utiliser les filtres. Je suis juste de se demander "comment utiliser le filtre avec de l' (clé,valeur)".
index et le comte devrait être disponible dans le champ d'application iirc

InformationsquelleAutor Vural Acar | 2013-02-09

126

Angulaire les filtres ne peuvent être appliquées à des tableaux et non des objets, de l'angulaire de l'API -

"Sélectionne un sous-ensemble des éléments de la matrice et renvoie un nouveau tableau."

Vous avez deux options ici:

1) déplacer $scope.items d'un tableau ou d' -

2) pré-filtre de la ng-repeat éléments, comme ceci:
```
<div ng-repeat="(k,v) in filterSecId(items)">
    {{k}} {{v.pos}}
</div>
```
Et sur le Contrôleur:
```
$scope.filterSecId = function(items) {
    var result = {};
    angular.forEach(items, function(value, key) {
        if (!value.hasOwnProperty('secId')) {
            result[key] = value;
        }
    });
    return result;
}
```
jsfiddle: http://jsfiddle.net/bmleite/WA2BE/
- On doit être prudent avec cette méthode pour éviter à l'infini (digest) boucles. Voir 6054 et 705. Résumé de Narretz: En bref, à l'aide des fonctions pour retourner la collection en ng-repeat est un anti-pattern. Il est préférable d'affecter à la collection à l'étendue de la propriété, et en boucle là-dessus.
- Commentaire. C'était en me jetant pour une boucle; je m'attendais à être en mesure de filtrer aucun itératif. Merci beaucoup. 🙂
- Note: C'est une perf d'anti-modèle maintenant. Angulaire 1.3 a apatrides filtres maintenant (tête d'oeuf.io/cours/...) donc, si vous voulez vraiment envie de créer un filtre pour ce.
- ne postez pas de liens qui ne sont pas libres!
- désolé à ce sujet. Mais il y a des gens qui sont à la tête d'oeuf.io abonnés et j'attends qu'il leur est utile.
- Pourquoi ne pas simplement ajouter une ng-si sur la répétition de l'élément?
InformationsquelleAutor bmleite

Ma solution serait de créer des filtres personnalisés et de les utiliser:

app.filter('with', function() {
  return function(items, field) {
        var result = {};
        angular.forEach(items, function(value, key) {
            if (!value.hasOwnProperty(field)) {
                result[key] = value;
            }
        });
        return result;
    };
});

Et en html:

 <div ng-repeat="(k,v) in items | with:'secId'">
        {{k}} {{v.pos}}
 </div>

toutefois, il sera en boucle n*n fois.

InformationsquelleAutor Valentyn Shybanov

25

Vous pouvez également utiliser ng-repeat avec ng-if:
```
<div ng-repeat="(key, value) in order" ng-if="value > 0">
```
- Intelligent. Ceci permet de gagner beaucoup de temps.
InformationsquelleAutor DenisKolodin
21

Ou tout simplement utiliser
```
ng-show="v.hasOwnProperty('secId')"
```
Voir la solution mise à jour ici:

http://jsfiddle.net/RFontana/WA2BE/93/
- Merci.. j'ai utilisé cela, mais avec ng-if au lieu
InformationsquelleAutor Renaud

Vous pouvez simplement utiliser angulaire.filtre module, et ensuite, vous pourrez filtrer, même par les propriétés imbriquées.

voir: jsbin

2 Exemples:

JS:

angular.module('app', ['angular.filter'])
  .controller('MainCtrl', function($scope) {
  //your example data
  $scope.items = { 
    'A2F0C7':{ secId:'12345', pos:'a20' },
    'C8B3D1':{ pos:'b10' }
  };
  //more advantage example
  $scope.nestedItems = { 
    'A2F0C7':{
      details: { secId:'12345', pos:'a20' }
    },
    'C8B3D1':{
      details: { pos:'a20' }
    },
    'F5B3R1': { secId:'12345', pos:'a20' }
  };
});

HTML:

  <b>Example1:</b>
  <p ng-repeat="item in items | toArray: true | pick: 'secId'">
    {{ item.$key }}, {{ item }}
  </p>

  <b>Example2:</b>
  <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' ">
    {{ item.$key }}, {{ item }}
  </p>

Vous devez divulguer que angular.filter est pas un core angulaire module et vous êtes l'auteur.
Il ressemble à la toArray filtre n'est pas présent. Est-il d'un remplacement, parce que le filter filtre ne permet toujours pas d'objets?

InformationsquelleAutor a8m

7

Il est un peu tard, mais j'ai regardé pour l'e filtre semblable et s'est terminé en utilisant quelque chose comme ceci:
```
<div ng-controller="TestCtrl">
 <div ng-repeat="(k,v) in items | filter:{secId: '!!'}">
   {{k}} {{v.pos}}
 </div>
</div>
```
- Comment avez-vous que cela fonctionne? Lorsque j'utilise un filtre avec une ng-objet répété, j'obtiens une erreur qui est ce qui est prévu sur la base de l'angle de la documentation.
InformationsquelleAutor ph6

J'ai fait un peu plus d'un filtre générique que j'ai utilisé dans plusieurs projets déjà:

objet = l'objet qui doit être filtré
champ = le champ dans l'objet que nous allons filtre sur
filtre = la valeur du filtre qui doit correspondre au champ

HTML:

<input ng-model="customerNameFilter" />
<div ng-repeat="(key, value) in filter(customers, 'customerName', customerNameFilter" >
   <p>Number: {{value.customerNo}}</p>
   <p>Name: {{value.customerName}}</p>
</div>

JS:

  $scope.filter = function(object, field, filter) {
    if (!object) return {};
    if (!filter) return object;

    var filteredObject = {};
    Object.keys(object).forEach(function(key) {
      if (object[key][field] === filter) {
        filteredObject[key] = object[key];
      }
    });

    return filteredObject;
  };

InformationsquelleAutor BelgoCanadian

Bien que cette question est assez vieille, je voudrais partager ma solution angulaire 1 les développeurs. Le point est de réutiliser l'original filtre angulaire, mais de façon transparente la réussite de tous les objets dans un tableau.

app.filter('objectFilter', function ($filter) {
    return function (items, searchToken) {
        //use the original input
        var subject = items;

        if (typeof(items) == 'object' && !Array.isArray(items)) {
            //or use a wrapper array, if we have an object
            subject = [];

            for (var i in items) {
                subject.push(items[i]);
            }
        }

        //finally, apply the original angular filter
        return $filter('filter')(subject, searchToken);
    }
});

l'utiliser comme ceci:

<div>
    <input ng-model="search" />
</div>
<div ng-repeat="item in test | objectFilter : search">
    {{item | json}}
</div>

ici est un plunker

InformationsquelleAutor ollix

Vous devez vous connecter pour publier un commentaire.