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

Question

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

27

以下是使用ng-repeat和应用筛选器的AngularJS应用程序。某个应用的筛选器没有留下任何值。如何显示通知？ js fiddle HTML

<div >
<div data-ng-controller="myCtrl">


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

    <p ng-show="!values.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
</div>


</div>

AngularJS

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
$scope.values = [{
    id: 1
}, ....
}];

$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];
    $scope.$apply();
}

});

- user1477955

7个回答

29

我会采用非常简单的 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才是可见的，否则就会隐藏起来。我认为这比使用ngShow/ngHide引入一个更多的监听器对性能更好。

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

- dfsq

你可以添加.loading{display:none}来防止在加载时显示该消息。 - Ouadie

1

如果有多个过滤器被执行，我最喜欢这种方式，它是对DOM状态的真实查看，而不需要额外的调查。 - ericjam

8

这是一个可行的示例：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>

- Vamsi

2

请看这里：http://jsfiddle.net/ntofav3c/ 修改如下：

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

to:

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

- sylwester

我最喜欢这种方法，因为它在Angular方面更有意义，但不幸的是，在ng-repeat列表上有多个过滤器时会变得混乱。 - ericjam

2

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

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

当您的过滤值长度为零时，它只会显示“列表为空”文本。

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

- Glogo

0

你可以使用ng-switch来实现这个功能。

例如：

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

- LukitaBrands

0

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

将emptymsg设置为背景div，mainContainer设置为顶部div。

emptyMsg div将始终显示，因此每当列表中没有值时，emptyMsg将是唯一显示的div。 PS：代码片段无法运行，因为未添加其他库。这只是为了给你一个想法！

//空消息....
.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>活动列表</h4>
        <ion-list>
           <div class="emptyMsg">找不到任何活动！</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>

- Sijan Gurung

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajamohan Anguchamy · Accepted Answer

我认为这是您想要的内容：

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的链接，请查看