Prüfen, ob das Objekt leer ist, funktioniert mit ng-show, aber nicht vom Controller?

Ich habe ein JS-Objekt so deklariert

$scope.items = {};

Ich habe auch eine $ http-Anfrage, die dieses Objekt mit Elementen füllt. Ich möchte feststellen, ob dieses Element leer ist. Es scheint, dass ng-show dies unterstützt ... Ich gebe ein

ng-show="items"

und magisch funktioniert es, ich würde das auch gerne von einem Controller aus tun, aber ich kann es scheinbar nicht zum Laufen bringen. Es scheint, dass ich über das Objekt iterieren muss, um zu sehen, ob es irgendwelche Eigenschaften hat oder lodash oder Unterstrich verwendet .

Gibt es eine Alternative?

Ich habe es versucht

alert($scope.items == true);

Es wird jedoch immer false zurückgegeben, wenn das Objekt erstellt und mit gefüllt wird $http, sodass es nicht so funktioniert.

Die Verwendung eines leeren Objektliteral ist hier nicht erforderlich. Sie können null oder undefiniert verwenden:

$scope.items = null;

Auf diese Weise ng-showsollte weiter funktionieren, und in Ihrem Controller können Sie einfach tun:

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

Und in Ihren $httpRückrufen tun Sie Folgendes:

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

Oder Sie könnten es einfach halten, indem Sie so etwas tun:

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

In einem privaten Projekt hat a diesen Filter geschrieben

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

Verwendung:

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

testen:

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);
    });

});

Grüße.

ein weiterer einfacher Einzeiler:

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

Wenn Sie die Elemente OBJ nicht gleich null haben konnten, können Sie Folgendes tun:

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

und in der Ansicht können Sie tun:

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

Du kannst tun

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

Nur wenn Ihr Browser ECMAScript 5 unterstützt. Beispielsweise unterstützt IE 8 diese Funktion nicht.

Siehe http://kangax.github.io/compat-table/es5/ für mehr Infos

if( obj[0] )

Eine sauberere Version davon könnte sein:

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

Dabei ist das Ergebnis undefiniert, wenn keine Objekteigenschaft festgelegt ist.

Oder wenn Sie lo-dash verwenden: _.empty (Wert).

"Überprüft, ob der Wert leer ist. Arrays, Zeichenfolgen oder Argumente Objekte mit einer Länge von 0 und Objekte ohne eigene aufzählbare Eigenschaften werden als" leer "betrachtet."

Überprüfen Sie das leere Objekt

$scope.isValid = function(value) {
    return !value
}

Sie können die Länge der Elemente überprüfen

ng-show="items.length"