web-dev-qa-db-fra.com

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

J'ai un objet JS déclaré comme tel

$scope.items = {};

J'ai également une requête $ http qui remplit cet objet avec des éléments. Je voudrais détecter si cet élément est vide, il semble que ng-show supporte cela ... j'entre

ng-show="items"

et comme par magie ça marche, je voudrais aussi faire la même chose avec un contrôleur mais je n'arrive pas à le faire fonctionner, il semble que je devrais peut-être parcourir l'objet pour voir s'il a des propriétés ou utiliser lodash ou un trait de soulignement .

Y a-t-il une alternative?

J'ai essayé

alert($scope.items == true);

mais il retourne toujours false lorsque l'objet est créé et lorsqu'il est rempli avec $http, il ne fonctionne donc pas de cette façon.

angularjsangularjs-scope
98
Martin

Utiliser un littéral d'objet vide n'est pas nécessaire ici, vous pouvez utiliser null ou undefined:

$scope.items = null;

De cette façon, ng-show devrait continuer à fonctionner, et dans votre contrôleur, vous pouvez simplement faire:

if ($scope.items) {
    // items have value
} else {
    // items is still null
}

Et dans vos rappels $http, vous procédez comme suit:

$http.get(..., function(data) {
    $scope.items = {
        data: data,
        // other stuff
    };
});
62
Ye Liu

Ou vous pouvez garder les choses simples en faisant quelque chose comme ceci:

alert(angular.equals({}, $scope.items));
198
testing123

Dans un projet privé, a écrit ce 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>

essai:

describe('Filter: isEmpty', function () {

    // load the filter's module
    beforeEach(module('myApp'));

    // initialize a new instance of the filter before each test
    var isEmpty;
    beforeEach(inject(function ($filter) {
        isEmpty = $filter('isEmpty');
    }));

    it('should return the input prefixed with "isEmpty filter:"', function () {
          expect(isEmpty({})).toBe(true);
          expect(isEmpty({foo: "bar"})).toBe(false);
    });

});

cordialement.

71
jcamelis

un autre simple one-liner:

var ob = {};
Object.keys(ob).length // 0
61
jaf0

Si vous ne pouvez pas avoir les objets OBJ égaux à null, vous pouvez faire ceci:

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

et dans la vue, vous pouvez faire:

<div ng-show="isEmpty(items)"></div>

Tu peux faire

var ob = {};
Object.keys(ob).length

Seulement si votre navigateur prend en charge ECMAScript 5. Par exemple, IE 8 ne prend pas en charge cette fonctionnalité.

Voir http://kangax.github.io/compat-table/es5/ pour plus d'informations

27
mattia.corci
if( obj[0] )

une version plus propre de ceci pourrait être:

if( typeof Object.keys(obj)[0] === 'undefined' )

où le résultat sera indéfini si aucune propriété d'objet n'est définie.

7
n0mad

Ou, si vous utilisez lo-dash: _.empty (valeur).

"Vérifie si la valeur est vide. Les objets de tableau, de chaîne ou d'argument de longueur 0 et les objets sans propriété énumérable sont considérés comme" vides "."

6
Jeff Pace