只显示“;没有结果”;在AngularJS中使用嵌套ng repeat时一次
Only show "No result" once when using nested ng-repeat in AngularJS
我的作用域有一个名为"ideas"的对象数组,格式如下:
{
"id":1,
"own":true,
"ideas":[
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ready"
]
}
我首先需要根据"自己"的属性进行筛选(自定义筛选包括接收)。然后,我希望最终结果只返回嵌套的"ideas"数组中的匹配项。
<div ng-repeat="idea in ideas | includeReceived:checked">
<div ng-repeat="ideaText in filteredIdeas = (idea['ideas'] | filter:search)">
{{ideaText}}
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>
</div>
这样做效果很好,但我想在找不到任何结果时显示消息"没有结果"。上面的代码为外部ng重复的每次迭代显示此消息。非常感谢你的任何想法。
您可以将"搜索"过滤器附加到第一组结果,以剔除那些没有搜索到文本的结果。然后,Angular 1.3.0提供了对过滤结果进行别名的功能,因此您可以执行以下操作:
<div ng-repeat="idea in ideas | includeReceived:checked | filter: {ideas: search} as filteredIdeas">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-if="filteredIdeas.length === 0">There is no result</div>
谢谢大家的投入。使用Angular 1.2.26中New Dev的方法,这段代码完成了任务:
<input type="checkbox" ng-model="checked" ng-init="checked=true">Include ideas you received<br/>
<div ng-controller="IdeaCtrl">
<div ng-repeat="idea in filteredIdeas = (ideas | includeReceived:checked | filter:search)">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>
您可以将消息放在ng repeat 之外
<div ng-hide="filteredIdeas.length">There is no result</div>
相关文章:
- ng init中的表达式无法使用ng repeat
- Angular ng repeat order将多个字段作为一个字段
- 访问ng repeat中的第一个项目
- Angular js+ng repeat+字母数字索引不起作用
- 如何正确应用Angularjs ng repeat
- AngularJS Navigation (li ng-repeat, create header li), DOM
- 如何使用ng repeat中的选定输入更新我的对象
- 无法使用ng repeat检索动态创建的JSON对象的属性
- 使用 ng-repeat访问 ng 表单元素/值
- 在Angular JS中,预先填充ng中的下拉值repeat
- Toggle Switch在包含ng model和ng repeat之后不进行切换
- 想要将ng个repeat对象传递给自定义筛选函数
- 如何从 ng-repeat(ng-repeat)中的指令访问控制器范围
- ng-repeat / ng-bind 不会显示我的数据
- 具有 ng-repeat(ng-repeat)中动态字段名称的自定义指令
- 如何在使用 ng-repeat(ng-repeat)时获取元素的正确高度和偏移值
- AngularJS ng-repeat ng-show array in object
- 将动态值绑定到 ng-repeat(ng-repeat)内的进度条
- 通过ng-repeat, ng-model和复选框获取数组中的位置
- AngularJS ng-repeat ng-click