Memeriksa apakah objek kosong, berfungsi dengan ng-show tetapi tidak dari pengontrol?

99

Saya memiliki objek JS yang dinyatakan seperti itu

$scope.items = {};

Saya juga memiliki permintaan $ http yang mengisi objek ini dengan item. Saya ingin mendeteksi apakah item ini kosong, tampaknya ng-show mendukung ini ... Saya masuk

ng-show="items"

dan secara ajaib berhasil, saya juga ingin melakukan hal yang sama dari pengontrol tetapi saya tidak dapat membuatnya berfungsi, tampaknya saya mungkin harus mengulangi objek untuk melihat apakah ia memiliki properti atau menggunakan lodash atau garis bawah .

Apakah ada alternatif lain?

Saya sudah mencoba

alert($scope.items == true);

tapi selalu mengembalikan false, saat objek dibuat dan saat diisi $http, jadi tidak berfungsi seperti itu.

Martin
sumber
1
Di pengontrol, Anda hanya menggunakan javascript, jadi jawaban dari pertanyaan ini akan berlaku: stackoverflow.com/questions/4994201/is-object-empty
Cyrille Ka

Jawaban:

62

Gunakan literal objek kosong tidak diperlukan di sini, Anda dapat menggunakan null atau undefined:

$scope.items = null;

Dengan cara ini, ng-showharus tetap berfungsi, dan di pengontrol Anda, Anda dapat melakukan:

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

Dan dalam $httpcallback Anda, Anda melakukan hal berikut:

$http.get(..., function(data) {
    $scope.items = {
        data: data,
        // other stuff
    };
});
Ye Liu
sumber
Hai terima kasih atas jawabannya, tetapi saya perlu menyetel properti pada objek sebelum saya benar-benar menerima info dari $ http. jika null maka saya tidak bisa melakukan items.available = true, bukan? Saya mendapat kesan bahwa saya harus membuat sebuah objek
Martin
Jika saya punya item = {}; apakah tidak ada cara untuk mengkonfirmasi ini dari pengontrol? tentu saja tidak akan nol di sini.
Martin
1
Persyaratan ini tidak ada dalam pertanyaan Anda, jadi jawaban saya didasarkan pada skenario yang terlalu disederhanakan. Jika Anda benar-benar membutuhkan objek untuk memulai, Anda dapat mencoba $scope.items = {available: false}, dan ng-show="items.available", dan di pengontrol Anda cukup periksa if (items.available) {...}.
Ye Liu
Terima kasih! sebenarnya saya akhirnya mengujinya dengan undefined dan itu bekerja dengan baik. Terima kasih.
Martin
@YeLiu jika Anda ingin membuat item dalam item menjadi null, Anda tidak akan diizinkan untuk membuatnya dua kali, angular akan mengeluarkan pengecualian yang memberi tahu Anda bahwa hal itu tidak mengizinkan dupes dalam koleksi untuk alasan yang tidak diketahui bagi saya sejauh ini.
Burimi
199

Atau Anda bisa membuatnya sederhana dengan melakukan sesuatu seperti ini:

alert(angular.equals({}, $scope.items));
pengujian123
sumber
Milik saya juga. Syukurlah, saya tidak perlu membebani lebih banyak fungsi untuk mengujinya.
Jimmy Kane
1
Sekadar catatan, untuk pengujian saya (chrome 45), persamaan javascript sederhana juga berfungsi:({} === $scope.items)
Jesper Rønn-Jensen
hmm, ini bernilai false, apa penyebabnya? ({} == {})
chrismarx
Pendekatan yang sangat cerdas! Satu kalimat selalu lebih baik :)
supersan
jika digunakan dalam tampilan dan menggunakan model tampilan sebagai cakupan, pastikan Anda menambahkan sudut ke model tampilan, yaitu vm.angular.equals ({}, items)
cinek
71

Dalam proyek pribadi, seorang menulis filter ini

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

pemakaian:

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

pengujian:

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

});

salam.

jcamelis.dll
sumber
2
Bekerja seperti pesona. Terima kasih telah berbagi!
Chnoch
2
Saya percaya filter harus mengurai konten dan mengembalikan subset konten. Apa yang Anda gambarkan tampaknya lebih seperti fungsi yang ditempatkan pada cakupan daripada filter. Lihat docs.angularjs.org/api/ng/filter/filter untuk informasi lebih lanjut.
kmkm
4
Saya pikir Anda sedang berbicara tentang filter tertentu yang disebut filter atau 'filterFilter'. Filter bersudut dapat mengembalikan apa pun yang Anda inginkan, bukan hanya sebagian dari masukan yang diberikan. Lihat docs.angularjs.org/api/ng/filter .
jcamelis
61

satu baris sederhana lainnya:

var ob = {};
Object.keys(ob).length // 0
jaf0
sumber
2
Ini elegan, tetapi Anda harus memeriksa kompatibilitas ECMAScript5 di browser yang Anda targetkan. Kesalahan utama adalah bahwa ini tidak akan berfungsi di IE8.
jmgem
8
Secara teknis, angula tidak secara resmi mendukung IE8 di cabang 1.3 (dev), juga tidak menjalankan pengujian untuk itu di 1.2 (stabil) docs.angularjs.org/guide/ie ... Selanjutnya, semakin sedikit kami mendukung IE8, mungkin akhirnya akan hilang. <masukkan bantahan perusahaan>
jaf0
2
Jawaban terbaik jika Anda benar-benar harus berurusan dengan benda kosong
chovy
27

Jika Anda tidak dapat memiliki item OBJ yang sama dengan null, Anda dapat melakukan ini:

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

dan dalam tampilan Anda dapat melakukan:

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

Anda dapat melakukan

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

Hanya jika browser Anda mendukung ECMAScript 5. Misalnya, IE 8 tidak mendukung fitur ini.

Lihat http://kangax.github.io/compat-table/es5/ untuk info selengkapnya

mattia.corci
sumber
7
if( obj[0] )

versi yang lebih bersih dari ini mungkin:

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

dimana hasilnya tidak akan terdefinisi jika tidak ada properti objek yang disetel.

n0mad
sumber
6

Atau, jika menggunakan lo-dash: _.empty (value).

"Memeriksa apakah nilai kosong. Array, string, atau argumen objek dengan panjang 0 dan objek tanpa properti enumerable sendiri dianggap" kosong "."

Jeff Pace
sumber
-2

Periksa objek kosong

$scope.isValid = function(value) {
    return !value
}
Taran
sumber
itu salah. Benda kosong tidak dapat diuji seperti itu
kaiser
-11

Anda dapat memeriksa panjang barang

ng-show="items.length"
Pradip Chongbang
sumber
1
Saya tidak mengerti mengapa jawaban ini memiliki -1 suara? Bisakah seseorang menjelaskan itu padaku?
iluu
14
@KarolinaKafel karena itemsmerupakan objek dan objek tidak memiliki .lengthproperti (biasanya) - array memilikinya
llamerr
2
Ini bukan sebuah array bung :)
Ghazanfar Khan
@KarolinaKafel bukan sebuah array maka items.length selalu tidak ditentukan.
Fabricio
Ya ya manusia itu melakukan kesalahan, -1 juga akan menunjukkan bahwa jawaban ini salah, mengapa -10? orang tumbuh :)
Aadam