web-dev-qa-db-fra.com

Filtre Angularjs non null

Essayer de filtrer les éléments avec une certaine propriété qui n'est pas null Donc, pour:

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]

Je voudrais montrer seulement un li; celui pour la sortie. C'est ce que j'ai essayé sans succès

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>

Avez-vous une idée de comment faire cela sans créer de filtre personnalisé? Ou alors, à quoi ressemblerait le filtre personnalisé?

javascriptangularjsangularjs-filter
69
Scotty Bollinger

Selon https://github.com/angular/angular.js/issues/1157 pour Angular> = 1.4, il est recommandé d'utiliser "'qui correspond toute primitive sauf null/undefined.

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
38
skalb

Angulaire> = 1.3.16 au plus tard (1.5.5 au moment de la rédaction/mise à jour), utilisez '' _ (chaîne vide) (ou '!!' fonctionne aussi)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Exemple: http://jsfiddle.net/TheSharpieOne/1mnachk6/

Angular> = 1.3.6 and <= 1.3.15 use '!null'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Exemple: http://jsfiddle.net/TheSharpieOne/4wxs67yv/

Angular> = 1.2 et <= 1.3.5 utilisent '' _ (chaîne vide) (ou '!!' fonctionne aussi)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Exemple: http://jsfiddle.net/TheSharpieOne/ovsqf17n/

Angular <1.2 '!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Exemple: http://jsfiddle.net/TheSharpieOne/RGEdc/

Dans l'ensemble, '!!' a le meilleur support, mais '' (chaîne vide) est recommandé et prévu à cet effet .

123
TheSharpieOne

Je pense que c'est plus facile à lire

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
5
Jens Alenius

Il est à noter que pour utiliser la solution des guillemets vides, vous devez laisser le comparateur à son paramètre par défaut de false. Vous avez peut-être l'habitude de mettre true dans les filtres de votre contrôleur, comme ceci:

const myAssessments = 
       this.filterFilter(this.assessments, {userId: this.user.id}, true);

Ce type de filtre strict ne fonctionnerait pas sans le true final. Mais vous devez supprimer le vrai ou le rendre faux pour que le contrôle non nul fonctionne:

const activeAndHistoric = 
      this.filterFilter(filteredAssessments, {historicYear: ''}, false);
1
IrishDubGuy