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

Posted 2023-02-22

【中文标题】Angular js - 如果 ng-repeat 为空则显示消息

【英文标题】：Angular js - Show message if ng-repeat is empty

【发布时间】：2014-11-10 01:07:05

【问题描述】：

以下 AngularJS 应用程序正在使用 ng-repeat 和应用的过滤器。某个应用的过滤器没有留下任何值。如何显示通知？

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();


);

【参考方案1】：

我想这就是你想要的：

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 LINK

This is Another one FIDDLE LINK check this also

【讨论】：

我会更新该代码，以显示两条消息，一条如果最初不存在“值”

@DmitriAlgazin 检查此更新 FIDDLE LINK jsfiddle.net/RajamohanShilpa/z9daLbLm/13

【参考方案2】：

我会采用非常简单的 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/

【讨论】：

您可以添加.loadingdisplay:none 以防止在加载时显示消息

如果有多个过滤器正在执行，我最喜欢这个，它可以真实地查看 DOM 状态，而无需实际进行开销调查。

【参考方案3】：

以下是工作示例：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>

【参考方案4】：

请看这里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>

【讨论】：

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

【参考方案5】：

看到这个工作 jsfiddle：http://jsfiddle.net/z9daLbLm/4/ 我在您的<ul> 列表之前添加了此代码

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

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

欲了解更多信息，请参阅此链接：How to display length of filtered ng-repeat data

【参考方案6】：

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

将emptymsg设为背景div，将mainContainer设为top div.. emptyMsg div 将始终显示，因此当列表中没有值时，emptyMsg 将是唯一显示的 div。 PS：代码sn-p不会运行..因为没有添加额外的库..这只是给你一个想法！

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

【参考方案7】：

您可以使用 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>`