Açısal JS tekrarlama tutma kolu boş liste kutusu

Bunun çok yaygın bir şey olacağını düşündüm, ancak AngularJS'de nasıl ele alacağımı bulamadım. Diyelim ki olayların bir listesi var ve bunları AngularJS ile çıktılamak istiyorum, o zaman bu oldukça kolay:

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

Ancak liste boşken durumu nasıl ele alabilirim? Listenin "Olay yok" veya benzeri bir şey olduğu bir ileti kutusu olmasını istiyorum. Yaklaşan tek şey ng-switchile events.length(bir nesne değil, bir dizi değil, boş olup olmadığını nasıl kontrol ederim?), Ama gerçekten sahip olduğum tek seçenek bu mu?

NgShow'u kullanabilirsiniz .

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

Bkz örnek .

Veya ngHide kullanabilirsiniz

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

Bkz örnek .

Nesne için Object.keys test edebilirsiniz .

Ve bunu filtrelenmiş bir listeyle kullanmak istiyorsanız, burada düzgün bir numara var:

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

Liste boşken DOM'dan kaldırmak istiyorsanız açısal-ui yönergesine göz atmak ui-ifisteyebilirsiniz ul:

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

Angularjs'ın yeni sürümlerinde bu sorunun doğru cevabı kullanmaktır 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>

Bu çözüm, liste indirilmek üzereyken, liste tanımlanması gerektiğinden ve iletinin görüntülenmesi için 0 uzunluğunda olduğu için titremez.

İşte kullanımda göstermek için bir dalgıç: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

İpucu: Ayrıca bir yükleme metni veya döndürücü de gösterebilirsiniz:

  <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>

Bu @Konrad 'ktoso' Malawski'ye benzer, ancak hatırlanması biraz daha kolaydır.

Açısal 1.4 ile test edildi

İşte JavaScript / AngularJS yerine CSS kullanarak farklı bir yaklaşım.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

İşaretleme:

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

Liste boşsa, <li ng-repeat = "filterItems içindeki öğe"> vb. Yorumlanır ve li öğesi yerine yorum haline gelir.

Bu ng anahtarını kullanabilirsiniz:

<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>

asBir ng-repeatöğenin altındaki bir koleksiyona başvuruda bulunmak için anahtar kelime kullanabilirsiniz :

<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>

genellikle ng-show kullanıyorum

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

örneğin tanımladığınız değişken

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

ng-if kullanabilirsiniz, çünkü bu html sayfasında görüntülenmez ve html etiketinizi incelemede görmezsiniz ...

<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>