在AngularJS中使用嵌套的ng-repeat时只显示一次“无结果”

时间:2014-11-03 06:32:05

标签: javascript angularjs

我的范围有一个名为“ideas”的对象数组,格式为:

{
   "id":1,
   "own":true,
   "ideas":[
      "one",
      "two",
      "three",
      "four",
      "five",
      "six",
      "seven",
      "eight",
      "nine",
      "ready"
   ]
}

我首先需要根据“自己的”属性进行过滤(自定义过滤器includeReceived)。然后我希望最终结果只返回嵌套的“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-repeat的每次迭代显示此消息。非常感谢您的任何想法。

3 个答案:

答案 0 :(得分:2)

你可以附加&#34;搜索&#34;过滤到第一组结果,以清除那些没有搜索到的文本的结果。然后,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>

答案 1 :(得分:2)

感谢您的投入,伙计们。在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>

答案 2 :(得分:-1)

您可以将信息放在ng-repeat

之外
<div ng-hide="filteredIdeas.length">There is no result</div>