Javascript Angular js - 如果 ng-repeat 为空则显示消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25866121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular js - Show message if ng-repeat is empty
提问by user1477955
The following AngularJS application is working with ng-repeat and an applied filter. A certain applied filter leaves no values left. How can I display a notification?
以下 AngularJS 应用程序使用 ng-repeat 和应用的过滤器。某个应用的过滤器没有留下任何值。如何显示通知？
HTML
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
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();
}
});
回答by Rajamohan Anguchamy
I think this is what you want:
我认为这就是你想要的：
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>回答by dfsq
I would go with very simple CSS approach:
我会采用非常简单的 CSS 方法：
HTML:
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:
CSS：
li + .no-items {
display: none;
}
So basically li.no-itemsis only visible if there are no other LI's and hidden otherwise. I think this is better for performance than introducing one more watcher with ngShow/ngHide.
所以基本上li.no-items只有在没有 otherLI的情况下才可见，否则隐藏。我认为这比通过ngShow/ngHide.
Demo: http://jsfiddle.net/z9daLbLm/5/
演示：http: //jsfiddle.net/z9daLbLm/5/
回答by Vamsi
Here's working example: http://jsfiddle.net/z9daLbLm/2/
这是工作示例：http: //jsfiddle.net/z9daLbLm/2/
You can save the result of the filter in ng-repeat
您可以将过滤器的结果保存在 ng-repeat
<div ng-repeat="item in filteredValues = (values | filter:filterIds())">{{item}}</div>
The result is stored in filteredValuesThen use this filtered values in the DOM
结果存储在filteredValues然后在DOM中使用这个过滤值
<div ng-show="!filteredValues.length">No Items</div>
回答by sylwester
Please see here http://jsfiddle.net/ntofav3c/
请看这里http://jsfiddle.net/ntofav3c/
change this:
改变这个：
<p ng-show="!values.length">no vals with this filter</p>
to:
到：
<p ng-hide="values | filter:filterIds()">no vals with this filter</p>
回答by Glogo
See this working jsfiddle: http://jsfiddle.net/z9daLbLm/4/I added this code before your <ul>list
请参阅此工作 jsfiddle：http: //jsfiddle.net/z9daLbLm/4/我在您的<ul>列表之前添加了此代码
<div ng-if="(values|filter:filterIds()).length == 0">
List is empty
</div>
It just shows "List is empty" text when your filtered values length is zero.
当您的过滤值长度为零时，它仅显示“列表为空”文本。
For more information refer to this link: How to display length of filtered ng-repeat data
有关更多信息，请参阅此链接：如何显示过滤后的 ng-repeat 数据的长度
回答by LukitaBrands
You can use ng-switch to do this.
您可以使用 ng-switch 来执行此操作。
For example:
例如：
` <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>`
回答by Sijan Gurung
I recently faced the same kind of problems..
I had three filters and one orderBy in the ng-repeat and wanted to show some emptyList Messages....
The above solutions didnot work..so I made one out of my own.
我最近遇到了同样的问题..我在 ng-repeat 中有三个过滤器和一个 orderBy 并想显示一些空列表消息......
上述解决方案不起作用......所以我自己做了一个。
- Made the emptymsg as background div and the mainContainer as top div..
- The emptyMsg div will always be shown, so whenever there is no value in list.. the emptyMsg will be the only div showing.
PS: the code snippet wont run..because the additional libraries are not added.. This is just to give you an idea!
//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>
- 将 emptymsg 作为背景 div 和 mainContainer 作为顶部 div ..
- emptyMsg div 将始终显示，因此只要列表中没有值.. emptyMsg 将是唯一显示的 div。PS：代码片段不会运行..因为没有添加额外的库..这只是给你一个想法！
//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>
