Nesnenin boş olup olmadığını kontrol etmek, ng-show ile çalışıyor ancak kontrolörden değil mi?


99

Böyle bildirilmiş bir JS nesnem var

$scope.items = {};

Ayrıca bu nesneyi öğelerle dolduran bir $ http isteğim var. Bu öğenin boş olup olmadığını tespit etmek istiyorum, görünüşe göre ng-show bunu destekliyor ... Giriyorum

ng-show="items"

ve sihirli bir şekilde işe yarıyor, aynı şeyi bir denetleyiciden de yapmak isterdim, ancak çalışmasını sağlayamıyorum, herhangi bir özelliği olup olmadığını görmek veya lodash veya alt çizgi kullanıp kullanmadığımı görmek için nesneyi yinelemem gerekebilir. .

Bir alternatif var mı?

Denedim

alert($scope.items == true);

ancak nesne oluşturulduğunda ve ile doldurulduğunda her zaman false döndürür $http, bu nedenle bu şekilde çalışmaz.


1
Bir denetleyicide, yalnızca javascript kullanıyorsunuz, bu nedenle bu sorunun yanıtları geçerli olacaktır: stackoverflow.com/questions/4994201/is-object-empty
Cyrille Ka

Yanıtlar:


62

Burada boş bir nesne değişmezi kullanmak gerekli değildir, null veya undefined kullanabilirsiniz:

$scope.items = null;

Bu şekilde ng-showçalışmaya devam etmelisiniz ve kontrol cihazınızda şunları yapabilirsiniz:

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

Ve $httpgeri aramalarınızda şunları yaparsınız:

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

Merhaba cevap için teşekkürler, ancak $ http'den gerçekten bilgi almadan önce nesnede özellikleri ayarlamam gerekiyor. null ise, items.available = true yapamazdım, yapabilir miyim? Bir nesne yaratmam gerektiği izlenimine
Martin

Bir öğem varsa = {}; Bunu bir kontrolörden doğrulamak için zaten yok mu? elbette burada boş olmaz.
Martin

1
Bu gereklilik, sorunuzda yer almıyor, bu yüzden cevabım fazlasıyla basitleştirilmiş senaryoya dayanıyor. Başlamak için gerçekten bir nesneye ihtiyacınız varsa, deneyebilir $scope.items = {available: false}ve ng-show="items.available"kontrol cihazınızda kontrol edebilirsiniz if (items.available) {...}.
Ye Liu

Teşekkürler! aslında onu undefined ile test ettim ve harika çalıştı. Teşekkürler.
Martin

@YeLiu, bir öğeyi boş yapmak istiyorsanız, bunu iki kez yapmanıza izin verilmeyecek, açısal, şimdiye kadar bilinmeyen nedenlerle bir koleksiyon içinde kopyalara izin vermediğini söyleyen bir istisna atacak.
Burimi

199

Veya bunun gibi bir şey yaparak işinizi basit tutabilirsiniz:

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

Benimki de öyle. Tanrıya şükür, test etmek için daha fazla işlevi aşırı yüklemem gerekmedi.
Jimmy Kane

1
Sadece bir not, ({} === $scope.items)
testim

hmm, bu yanlış olarak değerlendirilir, ne verir? ({} == {})
chrismarx

Çok akıllıca bir yaklaşım! Bir gömlek her zaman daha iyidir :)
supersan

görünümde kullanılırsa ve kapsam olarak görünüm modelini kullanırsanız, modeli görüntülemek için açısal eklediğinizden emin olun, yani vm.angular.equals ({}, öğeler)
cinek

71

Özel bir projede bu filtreyi yazdı

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

kullanım:

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

test yapmak:

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

});

Saygılarımızla.


2
Tıkır tıkır çalışıyor. Paylaşım için teşekkürler!
Chnoch

2
Filtrelerin içeriği ayrıştırması ve içeriğin bir alt kümesini döndürmesi gerektiğine inanıyorum. Tanımladığınız şey, bir filtreden çok kapsama yerleştirilmiş bir işleve benziyor. Daha fazla bilgi için docs.angularjs.org/api/ng/filter/filter adresine bakın .
kmkm

4
Sanırım filtre veya 'filterFilter' adı verilen belirli bir filtreden bahsediyorsunuz. Açısal bir filtre, yalnızca verilen girdinin bir alt kümesini değil, istediğiniz her şeyi döndürebilir. Docs.angularjs.org/api/ng/filter adresine bakın .
jcamelis

61

başka bir basit tek astar:

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

2
Bu zarif, ancak hedeflediğiniz tarayıcılarda ECMAScript5 uyumluluğunu kontrol etmeniz gerekiyor. En büyük tuzak, bunun IE8'de işe yaramayacağıdır.
jmgem

8
Teknik olarak angula, 1.3 (dev) dalında IE8'i resmi olarak desteklemiyor ve 1.2 (kararlı) docs.angularjs.org/guide/ie üzerinde testler yapmıyor ... Dahası, IE8'i ne kadar az destekliyoruz, belki sonunda kaybolur. <kurumsal
çürütmeyi

2
Gerçekten boş bir nesneyle
uğraşmanız

27

OBJ öğeleri null değerine eşit olamazsa, bunu yapabilirsiniz:

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

ve görünümde şunları yapabilirsiniz:

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

Yapabilirsin

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

Yalnızca tarayıcınız ECMAScript 5'i destekliyorsa, Örneğin, IE 8 bu özelliği desteklemez.

Daha fazla bilgi için http://kangax.github.io/compat-table/es5/ adresine bakın


7
if( obj[0] )

bunun daha temiz bir versiyonu şunlar olabilir:

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

nesne özelliği ayarlanmadıysa sonuç tanımsız olacaktır.


6

Veya lo-tire kullanılıyorsa: _.empty (değer).

"Değerin boş olup olmadığını kontrol eder. 0 uzunluğundaki diziler, dizeler veya bağımsız değişkenler nesneleri ve kendi numaralandırılabilir özellikleri olmayan nesneler" boş "olarak kabul edilir."


-2

Boş nesneyi kontrol edin

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

bu açıkça yanlış. Boş nesneler böyle test edilemez
kaiser

-11

öğelerin uzunluğunu kontrol edebilirsiniz

ng-show="items.length"

1
Bu cevabın neden -1 oy olduğunu anlamıyorum? Biri bana bunu açıklayabilir mi lütfen?
iluu

14
@KarolinaKafel çünkü itemsbir nesnedir ve nesnelerin .lengthözelliği yoktur (genellikle) - dizilerde vardır
llamerr

2
Bu bir dizi değil dostum :)
Ghazanfar Khan

@KarolinaKafel bir dizi değildir, bu durumda öğeler.uzunluk her zaman tanımsızdır.
Fabricio

Ya insan hata yaptı, -1 de bu cevabın yanlış olduğunu gösterecekti, neden -10? insanlar büyür :)
Aadam
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.