web-dev-qa-db-fra.com

Comment rechercher un objet vide dans une vue AngularJS

Dans la portée du contrôleur, j'ai quelque chose comme:

$scope.card = {};

Dans la vue, je dois vérifier si mon objet est toujours un littéral vide, {} ou s'il contient des données dans certains champs.

J'ai essayé ceci:

ng-show="angular.equals({}, card)"

et

ng-show="!angular.equals({}, card)"

mais ça n'a pas marché.

Y a-t-il de meilleurs moyens? Comment vérifier si un objet est vide ou s'il contient des champs?

javascriptangularjs
25
brabertaser19

Vous pouvez utiliser: Object.keys(card).length === 0

Mais assurez-vous de l’utiliser depuis une méthode du contrôleur car la variable Object n’est pas disponible dans la vue, par exemple:

$scope.isObjectEmpty = function(card){
   return Object.keys(card).length === 0;
}

Ensuite, vous pouvez appeler la fonction à partir de la vue:

ng-show="!isObjectEmpty(card)"
45
Md Hasan Ibrahim

Utilisez le filtre json et comparez-le avec la chaîne '{}'.

<div>
    My object is {{ (myObject | json) == '{}' ? 'Empty' : 'Not Empty' }}
</div>

ng-show exemple:

<div ng-show="(myObject | json) != '{}'"></div>
12
Wallace Maxters

Créez une fonction qui vérifie si l'objet est vide:

$scope.isEmpty = function(obj) {
  for(var prop in obj) {
      if(obj.hasOwnProperty(prop))
          return false;
  }
  return true;
};

Ensuite, vous pouvez vérifier comme ceci dans votre HTML:

ng-show="!isEmpty(card)"
6
Jahongir Rahmonov

Essaye ça:

angular.equals({}, $scope.card)
5
Yogesh Kate

s'il vous plaît essayez cette façon avec le filtre

angular.module('myApp')
    .filter('isEmpty', function () {
        var bar;
        return function (obj) {
            for (bar in obj) {
                if (obj.hasOwnProperty(bar)) {
                    return false;
                }
            }
            return true;
        };
    });

usage:

 <p ng-hide="items | isEmpty">Some Content</p>

Via de: Vérifier si l'objet est vide, fonctionne avec ng-show mais pas depuis le contrôleur?

5
Ramesh Rajendran

http://plnkr.co/edit/u3xZFRKYCUh4D6hGzERw?p=preview

Comme angular n’est pas disponible à partir de l’oscilloscope, vous pouvez le transmettre à votre contrôleur.

$scope.angular = angular;
3
Moncef Hassein-bey

Cela fera l'objet de vérification à vide:

<div ng-if="isEmpty(card)">Object Empty!</div>


$scope.isEmpty = function(obj){
  return Object.keys(obj).length == 0;
}
2
user8198527

Vous ne devez pas initialiser votre variable sur un objet vide, mais laissez-la être undefined ou null jusqu'à ce que les conditions soient remplies pour qu'il y ait une variable non -null/undefined:

$scope.card;

if (someCondition = true) {
    $scope.card = {};
}

Ensuite, votre modèle:

ng-show="card"
1
pherris

Créez une fonction $scope qui la vérifie et renvoie true ou false, comme une fonction "isEmpty" et utilisez-la dans votre vue sur une instruction ng-if 

ng-if="isEmpty(object)"
0
Thiago Sciotta

Je devais valider une vérification d'objet vide comme ci-dessous

ex: 

<div  data-ng-include="'/xx/xx/xx/regtabs.html'" data-ng-if =
    "$parent.$eval((errors | json) != '{}')" >
</div>

L'erreur est mon objet de portée, il est défini dans mon contrôleur en tant que $scope.error = {};

0
priya gupta

Vous pouvez utiliser la classe d’objets javascript ordinaire pour y parvenir. La classe d’objets a une fonction key qui prend 1 argument comme entrée comme suit,

Object.keys (obj) .length === 0

Vous pouvez y parvenir de trois manières: 1) Portée actuelle du contrôleur 2) Filtre 3) $ rootScope

1) Le premier moyen est la portée du contrôleur actuel, 

$ scope.isObjEmpty = function (obj) { return Object.keys (obj) .length === 0; }

Ensuite, vous pouvez appeler la fonction à partir de la vue:

ng-show = "! isObjEmpty (obj)" si vous souhaitez afficher et masquer le dom de manière dynamique & ng-if = "! isObjEmpty (obj)" si vous souhaitez supprimer ou ajouter un dom de manière dynamique.

2) La deuxième façon est un filtre personnalisé. Le code suivant devrait fonctionner pour l’objet & Array,

angular.module('angularApp')
    .filter('isEmpty', [function () {
        return function (obj) {
            if (obj == undefined || obj == null || obj == '')
                return true;
            if (angular.isObject(obj))
                return Object.keys(obj).length != 0;

            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    return false;
                }
            }
            return true;
        };
    }]);

    <div ng-hide="items | isEmpty"> Your content's goes here </div>

3) La troisième façon est $ rootScope, Créez une fonction javascript simple et ajoutez-la dans le serveur $ rootScope, elle sera accessible par défaut dans toutes les portées et toutes les interfaces utilisateur.

fonction isObjEmpty (obj) { return Object.keys (obj) .length === 0; }

$ rootScope.isObjEmpty = isObjEmpty;

0
Pravin P Patil

essaye ça

   if(object.key==undefined){
     // object empty
   }else{
    // object exist
   }

en html 

*ngIf="object.key==undefined"
0
kelvin kantaria

J'ai rencontré un problème similaire lors de la vérification du vide dans un composant . Dans ce cas, le contrôleur doit définir une méthode qui effectue le test et la vue l'utilise:

function FormNumericFieldController(/*$scope, $element, $attrs*/ ) {
    var ctrl = this;

    ctrl.isEmptyObject = function(object) {
        return angular.equals(object, {});
    }
}

<!-- any validation error will trigger an error highlight -->
<span ng-class="{'has-error': !$ctrl.isEmptyObject($ctrl.formFieldErrorRef) }">
    <!-- validated control here -->
</span>
0
Alexei