AngularJS ng-repeat xử lý trường hợp danh sách trống

Tôi nghĩ rằng đây sẽ là một điều rất phổ biến, nhưng tôi không thể tìm ra cách xử lý nó trong AngularJS. Giả sử tôi có một danh sách các sự kiện và muốn xuất chúng bằng AngularJS, thì điều đó khá dễ dàng:

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

Nhưng làm thế nào để tôi xử lý trường hợp khi danh sách trống? Tôi muốn có một hộp thông báo ở vị trí có danh sách với nội dung như "Không có sự kiện" hoặc tương tự. Điều duy nhất sẽ đến gần là ng-switchvới events.length(làm cách nào để kiểm tra nếu trống khi một đối tượng và không phải là một mảng?), Nhưng đó có thực sự là lựa chọn duy nhất tôi có không?

Bạn có thể sử dụng ngShow .

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

Xem ví dụ .

Hoặc bạn có thể sử dụng ngHide

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

Xem ví dụ .

Đối với đối tượng bạn có thể kiểm tra Object.keys .

Và nếu bạn muốn sử dụng điều này với một danh sách được lọc thì đây là một mẹo nhỏ:

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

Bạn có thể muốn kiểm tra lệnh angular-ui ui-if nếu bạn chỉ muốn xóa ulkhỏi DOM khi danh sách trống:

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

Với các phiên bản mới hơn của angularjs, câu trả lời chính xác cho câu hỏi này là sử dụng 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>

Giải pháp này sẽ không nhấp nháy khi danh sách sắp tải xuống vì danh sách phải được xác định và có độ dài bằng 0 để thông báo hiển thị.

Đây là một plunker để hiển thị nó được sử dụng: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Mẹo: Bạn cũng có thể hiển thị văn bản đang tải hoặc spinner:

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

Điều này tương tự với @Konrad 'ktoso' Malawski nhưng dễ nhớ hơn một chút.

Đã thử nghiệm với Angular 1.4

Đây là một cách tiếp cận khác bằng CSS thay vì JavaScript / AngularJS.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Đánh dấu:

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

Nếu danh sách trống, <li ng-repeat = "mục trong bộ lọc được lọc">, v.v. sẽ được nhận xét và sẽ trở thành nhận xét thay vì phần tử li.

Bạn có thể sử dụng ng-switch này:

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

Bạn có thể sử dụng astừ khóa để giới thiệu bộ sưu tập theo một ng-repeatyếu tố:

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

tôi thường sử dụng ng-show

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

ví dụ về biến bạn xác định

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

bạn có thể sử dụng ng-if vì đây không phải là kết xuất trong trang html và bạn không thấy thẻ html của mình khi kiểm tra ...

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