显示/隐藏基于已过滤输出ng-repeat的警告消息
[英]Show /hide warning messag based on filtered outputs ng-repeat
问题描述
如果过滤器按钮与按钮单击中的任何结果相匹配，请在所附的小提琴中找到我要在其中发布警告消息“无数据显示”的小提琴。
我已经为表格和消息提供了条件，以便在单击时以及在单击时显示它们。
<div ng-show="name===null">No results</div>
如果基于链接单击的表中没有令人满意的数据，则应显示以上消息，并且表应一起隐藏。 我试图根据属性name给出条件，但是它不起作用。
3 个解决方案
解决方案1
1 2017-01-10 05:33:35
干得好！ 更新的小提琴
您那里有几个问题：
- 您的
ng-controller在div但是您在控制器外设置了name -
<div ng-show="name===null">No results</div>在这里，您将name与null进行了比较，但在clear filter中将其设置为空字符串
希望能帮助到你！
编辑 ：在clear filter它没有显示所有项目。 固定和更新的小提琴
解决方案2
1 2017-01-10 05:33:54
尝试使用此代码
<body ng-app="app" ng-controller="main">
<a ng-click="name = 'Fruit'">Fruit</a>
<a ng-click="name = 'Nut'">Nut</a>
<a ng-click="name = 'Seed'">Seed</a>
<a ng-click="name = ''">clear filter</a>
<br> <br> <br>
<div ng-show="name ==''">No results</div>
<table class="table" ng-show="name!=''">
<thead>
<tr>
<th>Target</th>
<th>Level</th>
<tr>
<tbody>
<tr ng-repeat="link in links | filter:name">
<td>
{{link.name}}
</td>
<td>
{{link.category}}
</td>
</tr>
</tbody>
</table>
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.filters = { };
$scope.name = '';
$scope.links = [
{name: 'Apple', category: 'Fruit'},
{name: 'Pear', category: 'Fruit'},
{name: 'Almond', category: 'Nut'},
{name: 'Mango', category: 'Fruit'},
{name: 'Cashew', category: 'Nut'}
];
});
解决方案3
1 已采纳 2017-01-10 05:50:38
检查您的提琴http://jsfiddle.net/w0L4o8jm/6/
默认情况下，我使用Fruit进行过滤。 您可以在控制器中进行更改。
得出答案，根据过滤器计算过滤后的物品长度。 如果长度为0或名称为“”，则不显示no results 。 否则，在表中显示结果。 只需将以下代码复制粘贴到小提琴中，然后将其签出即可。
<html ng-app="app">
<a ng-click="name = 'Fruit'">Fruit</a>
<a ng-click="name = 'Nut'">Nut</a>
<a ng-click="name = 'Seed'">Seed</a>
<body ng-controller="main">
<a ng-click="name = ''">clear filter</a>
<br> <br> <br>
<div ng-show="(name=='' || !filtered.length)">No results</div>
<div ng-repeat="link in filtered = (links|filter:name)"></div>
<table class="table" ng-show="(filtered.length != 0 && name!='')">
<thead>
<tr>
<th>Target</th>
<th>Level</th>
<tr>
<tbody>
<tr ng-repeat="link in links|filter:name">
<td>
{{link.name}}
</td>
<td>
{{link.category}}
</td>
</tr>
</tbody>
</table>
</body>
控制器代码
var app = angular.module（'app'，[]）;
app.controller('main', function($scope) {
$scope.filters = { };
$scope.name='Fruit';
$scope.links = [
{name: 'Apple', category: 'Fruit'},
{name: 'Pear', category: 'Fruit'},
{name: 'Almond', category: 'Nut'},
{name: 'Mango', category: 'Fruit'},
{name: 'Cashew', category: 'Nut'}
];
});
对于1.3之前的Angular
将结果分配给一个新变量（例如，已过滤）并访问它：
<div ng-repeat="link in filtered = (links|filter:name)"></div>
对于Angular 1.3+
使用别名表达式（文档：Angular 1.3.0：ngRepeat，向下滚动到“参数”部分）：
<div ng-repeat="link in links|filter:name as filtered"></div>
隐藏空的已过滤ng-repeat
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.