【问题标题】:Show Message if results are 0如果结果为 0,则显示消息
【发布时间】:2016-12-19 12:46:08
【问题描述】:

我有一个表格过滤器,如果过滤器什么也没找到,我想不显示任何结果。
总之必要的代码:

<th>Keys
<input ng-model="k" id="search" class="form-control" placeholder="Suche...">
            </th>  
<tr dir-paginate="v in result = ($ctrl.langV  | filter:{Name:k}) | orderBy : 'Name' |itemsPerPage: 10">
            <td class="td-keys">{{v.Name}}
            </td>
            <td ng-if="result.length === 0">Keine Ergebnisse</td>

我已经在这里找到了一些例子:

 <td ng-show="result.length">Keine Ergebnisse</td>  

因为找到了结果,所以向我显示了额外的 td。但是没有结果的反面永远不会奏效。 感谢解决方案:)

【问题讨论】:

    标签: javascript angularjs html angularjs-ng-repeat


    【解决方案1】:

    首先你必须给你的“结果”一个别名,比如filteredItems,如下:

    <tr dir-paginate="v in $ctrl.langV | filter: { Name: k } | orderBy : 'Name' | itemsPerPage: 10 as filteredItems">
    

    然后,你就可以使用它了:

    <td ng-if="!filteredItems.length">No results</td>
    

    【讨论】:

      【解决方案2】:

      在您引用的三个示例中,它们在 ng-repeat 的 outside 中显示无结果消息。您将在 ng-repeat inside 中显示无结果消息。尝试将该语句移出 ng-repeat 的范围,然后看看它是否有效。

      【讨论】:

      • 它在工作表之外。但遵循底部的docs.angularjs.org/api/ng/directive/ngRepeat 示例。它不应该是一个问题或? List 重复中是否也存在 ng if ?那么您的解决方案是什么?
      • 该示例在ng-repeat 的范围之外也有无结果消息outside
      • 啊,好的,明白了。更改为 &lt;tr dir-paginate="v in $ctrl.langV | filter:{Name:k}| orderBy : 'Name' |itemsPerPage: 10 as results "&gt; &lt;td class="td-keys"&gt;{{v.Name}} &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td ng-if="results.length === 0"&gt;Keine Ergebnisse&lt;/td&gt; &lt;/tr&gt; 现在可以使用并接受答案。
      【解决方案3】:

      你为什么不这样使用...当no results时,会显示。

      <td ng-if="!result.length">Keine Ergebnisse</td>
      

      【讨论】:

      • @AkAk47:那么你的结果应该有一些对象......当你在你的视图 {{result}} 中尝试这个没有结果时它会给你什么......
      • 如果我选择真正的&lt;td ng-if="result.length"&gt;{{result}} Keine Ergebnisse&lt;/td&gt;,它会显示所有对象。 !result.length 不再有输出。
      • 在你的控制器中让你的 $scope.result = [];一个空数组,然后尝试 {{result}} Keine Ergebnisse
      • 结果相同。我不需要一个函数或为此创建一个 .filter ,对吗?因为所有示例都使用纯 Html + ng-show/if/hide。
      猜你喜欢
      • 2017-09-28
      • 2012-05-31
      • 1970-01-01
      • 2014-09-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-09-08
      • 1970-01-01
      相关资源
      最近更新 更多