AngularJS ng-ulangi menangani daftar kasus kosong

Saya pikir ini akan menjadi hal yang sangat umum, tetapi saya tidak dapat menemukan cara menanganinya di AngularJS. Katakanlah saya memiliki daftar acara dan ingin menampilkannya dengan AngularJS, maka itu cukup mudah:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Tetapi bagaimana saya menangani kasing ketika daftar kosong? Saya ingin memiliki kotak pesan di tempat daftar dengan sesuatu seperti "Tidak ada acara" atau serupa. Satu-satunya hal yang akan mendekati adalah ng-switchdengan events.length(bagaimana saya memeriksa jika kosong ketika suatu objek dan bukan array?), Tetapi apakah itu benar-benar satu-satunya pilihan yang saya miliki?

Anda dapat menggunakan ngShow .

<li ng-show="!events.length">No events</li>

Lihat contoh .

Atau Anda bisa menggunakan ngHide

<li ng-hide="events.length">No events</li>

Lihat contoh .

Untuk objek, Anda dapat menguji Object.keys .

Dan jika Anda ingin menggunakan ini dengan daftar yang difilter di sini adalah trik yang rapi:

<ul>
    <li ng-repeat="item in filteredItems  = (items | filter:keyword)">
        ...
    </li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>

Anda mungkin ingin memeriksa petunjuk angular-ui ui-if jika Anda hanya ingin menghapus uldari DOM ketika daftar kosong:

<ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Dengan versi angular yang lebih baru, jawaban yang benar untuk pertanyaan ini adalah dengan menggunakan ng-if:

<ul>
  <li ng-if="list.length === 0">( No items in this list yet! )</li>
  <li ng-repeat="item in list">{{ item }}</li>
</ul>

Solusi ini tidak akan berkedip ketika daftar akan diunduh karena daftar harus ditentukan dan dengan panjang 0 untuk pesan yang akan ditampilkan.

Berikut adalah penyedot untuk menunjukkannya digunakan: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Kiat: Anda juga dapat menampilkan teks atau pemintal yang memuat:

  <li ng-if="!list">( Loading... )</li>

<ul>
    <li ng-repeat="item in items | filter:keyword as filteredItems">
        ...
    </li>
    <li ng-if="filteredItems.length===0">
        No items found
    </li>
</ul>

Ini mirip dengan @Konrad 'ktoso' Malawski tetapi sedikit lebih mudah diingat.

Diuji dengan Angular 1.4

Berikut ini pendekatan yang berbeda menggunakan CSS, bukan JavaScript / AngularJS.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Markup:

<ul>
    <li ng-repeat="item in filteredItems"> ... </li>
    <li class="emptymsg">No items found</li>
</ul>

Jika daftar kosong, <li ng-repeat = "item in filteredItems">, dll. Akan dikomentari dan akan menjadi komentar dan bukan elemen li.

Anda dapat menggunakan ng-switch ini:

<div ng-app ng-controller="friendsCtrl">
  <label>Search: </label><input ng-model="searchText" type="text">
  <div ng-init="filtered = (friends | filter:searchText)">
  <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
  <div ng-switch="(friends | filter:searchText).length">
    <span class="ng-empty" ng-switch-when="0">No friends</span>
    <table ng-switch-default>
      <thead>  
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <tr ng-repeat="friend in friends | filter:searchText">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </tbody>
  </table>
</div>

Anda dapat menggunakan askata kunci untuk merujuk koleksi di bawah ng-repeatelemen:

<table>
    <tr ng-repeat="task in tasks | filter:category | filter:query as res">
        <td>{{task.id}}</td>
        <td>{{task.description}}</td>
    </tr>
    <tr ng-if="res.length === 0">
        <td colspan="2">no results</td>
    </tr>
</table>

saya biasanya menggunakan ng-show

<li ng-show="variable.length"></li>

di mana variabel yang Anda tetapkan misalnya

<div class="list-group-item" ng-repeat="product in store.products">
   <li ng-show="product.length">show something</li>
</div>

Anda dapat menggunakan ng-jika karena ini bukan render di halaman html dan Anda tidak melihat tag html Anda di periksa ...

<ul ng-repeat="item in items" ng-if="items.length > 0">
    <li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>