web-dev-qa-db-fra.com

filtre ng-repeat sur le booléen

J'essaye de filtrer sur une valeur booléenne dans un ng-repeat.

Liste des utilisateurs non enregistrés:

    <h3>Unregistered Users</h3>
    <div ng-repeat="user in users | filter:!user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>

Liste des utilisateurs enregistrés:

    <h3>Registered Users</h3>
    <div ng-repeat="user in users | filter:user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>

Existe-t-il un bon moyen de filtrer basé sur inscrit et! Enregistré?.

angularjsangularjs-ng-repeatangularjs-filter
60
lostintranslation

filtrer par expression obj:

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:{registered:false}">
    <div class="row-fluid">
    <div class="span2">
      {{user.name}}
    </div>
  </div>
</div>

JSFiddle: http://jsfiddle.net/alfrescian/9ytDN/

117
alfrescian

Créez une méthode dans le contrôleur qui renvoie true ou false en fonction de la logique dont vous avez besoin et spécifiez cette fonction dans le filtre.

Quelque chose comme ça:

$scope.isRegistered = function(item) {
  return item.registered;
};

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:!isRegistered ">
    <div class="row-fluid">
    <div class="span2">
      {{user.name}}
    </div>
  </div>
</div>
13
Giorgi

Si un élément n'a pas de propriété booléenne, vous pouvez trouver l'élément avec une propriété non définie sur true en utilisant '!' avec des citations. ex. filtre: {propriété: '!' + vrai}.

Exemple:

$scope.users = [
        {
            name : 'user1 (registered)',
            registered : true
        },
        {
            name : 'user2 (unregistered)'
        },
        {
            name : 'user3 (registered)',
            registered : true
        },
         {
            name : 'user4 (unregistered)'
        }

Pour filtrer les utilisateurs non enregistrés:

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:{registered:'!'+true}">
    <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>
6
kukkurkurat

Avait la même question. La solution Alfrescian ne fonctionnait pas pour moi sur Angular 1.1.5.

Trouvé ce violon: http://jsfiddle.net/buehler/HCjrQ/

.filter('onlyBooleanValueFilter', [function(){
    return function(input, param){
        var ret = [];
        if(!angular.isDefined(param)) param = true;
        angular.forEach(input, function(v){
            // 'active' is a hard-coded field name
            if(angular.isDefined(v.active) && v.active === param){
                ret.Push(v);
            }
        });
        return ret;
    };
}])

Vous auriez besoin d'ajuster le code du filtre en fonction de votre champ.

3
Websirnik

Légère modification de la réponse de Websirnik, cela autorise n'importe quel nom de colonne pour l'ensemble de données:

.filter('onlyBooleanValueFilter', [function () {
    return function (input, column, trueOrFalse) {
        var ret = [];

        if (!angular.isDefined(trueOrFalse)) {
            trueOrFalse = false;
        }

        angular.forEach(input, function (v) {
            if (angular.isDefined(v[column]) && v[column] === trueOrFalse) {
                ret.Push(v);
            }
        });

        return ret;
    };
}])

Balisage:

<div repeat="row in your.dataset | onlyBooleanValueFilter: 'yourColumn' : true"> 
     ...your stuff here....
</div>
1
Shawn Dotey