Angular js-如果ng repeat为空，则显示消息

我想这就是你想要的：

var app = angular.module('myApp', []);    
app.controller('myCtrl', function ($scope) {
  $scope.values = [
    {id: 1}, 
    {id: 2}, 
    {id: 3}, 
    {id: 4}, 
    {id: 5}, 
    {id: 6}];
    
  $scope.filter = [1,2,3,4,5,6];
        
  $scope.filterIds = function (ids) {
    return function (item) {
      var filter = $scope.filter; 
      return filter.indexOf(item.id) !== -1;       	
    }
  }
        
  $scope.loadNewFilter = function (){
    $scope.filter = [1,5];    
  }                 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div data-ng-controller="myCtrl">               
    <ul>
      <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> 
        <code>#{{item.id}}</code> Item
      </li>
    </ul>           
    <p ng-show="!testValue.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
  </div>
</div>

FIDDLE链接

这是另一个FIDDLE链接检查这也是

我会选择非常简单的CSS方法：

HTML:

<ul>
    <li data-ng-repeat="item in values | filter:filterIds()"> <code>#{{item.id}}</code> Item</li>
    <li class="no-items">There are no matching items.</li>
</ul>

CSS：

li + .no-items {
    display: none;
}

所以基本上li.no-items只有在没有其他LI的情况下才可见，否则就隐藏起来。我认为这比在ngShow/ngHide中多引入一个观察程序对性能更好。

演示：http://jsfiddle.net/z9daLbLm/5/

下面是一个工作示例：http://jsfiddle.net/z9daLbLm/2/

您可以将过滤结果保存在ng-repeat 中

<div ng-repeat="item in filteredValues = (values | filter:filterIds())">{{item}}</div>

结果存储在filteredValues中然后在DOM 中使用此过滤值

<div ng-show="!filteredValues.length">No Items</div>

请参阅此处http://jsfiddle.net/ntofav3c/

更改此项：

<p ng-show="!values.length">no vals with this filter</p>

至：

 <p ng-hide="values | filter:filterIds()">no vals with this filter</p>

请参阅以下工作jsfiddle：http://jsfiddle.net/z9daLbLm/4/我在你的<ul>列表之前添加了这个代码

<div ng-if="(values|filter:filterIds()).length == 0">
    List is empty
</div>

当过滤后的值长度为零时，它只显示"列表为空"文本。

有关更多信息，请参阅此链接：如何显示过滤后的ng重复数据的长度

我最近也遇到了同样的问题。。我在ng repeat中有三个过滤器和一个orderBy，想显示一些emptyList消息。。。。
上述解决方案不起作用。。所以我自己做了一个。

• 将emptymsg作为背景div，将mainContainer作为顶部div
• emptyMsgdiv将始终显示，所以只要列表中没有值。。emptyMsg将是唯一显示的div。附言：代码片段不会运行。。因为没有添加附加库。。这只是给你一个想法！

  //empty msg....
  .emptyMsg{
      position: absolute;
      left: 0;right: 0;
      margin: auto;
      color: gray;
      text-align: center;
      font-size:3.0em;
      z-index: 0;
  }
  .activityItem {
      margin: 0px !important;
      padding: 0px !important;
      border: 0px !important;
  }
  .mainContainer {
      z-index: 999;
      width: 100%;
      height: 40px;
      left: 0px;
      margin-top: 10px;
      display: inline-block;
  }

  <h4>List of Activities</h4>
          <ion-list>
             <div class="emptyMsg">No Activities found!</div>
              <div class="item activityItem" ng-repeat="activity in activities | orderBy:field1Order:order.reverse1 | filter:importanceFilter | filter:motiveFilter track by $index">
                     <div class="mainContainer">
                              <div class="divBar">{{activity.energy}}%</div>
                     
                  </div>
              </div>
              
          </ion-list>

您可以使用ng开关来执行此操作。

例如：

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