如果角度模型中没有数据，则显示消息答案

【问题标题】：Display message if no data in angular model如果角度模型中没有数据，则显示消息
【发布时间】：2015-08-27 14:24:11
【问题描述】：

我有一个 Angular 应用程序，可以将 json 中的数据模板化到 HTML 表中。这里显示一个项目。

http://plnkr.co/edit/EReUj4GkhGF36SS6RaX4?p=preview

<tr ng-repeat="item in data">
    <td><a href="{{ item.Name | removeSpacesThenLowercase }}">{{ item.Fields["{BB2389F3-555B-4FC6-B106-C0A23A55A15F}"].Value }}</a></td>
    <td>{{ item.Fields["{123A77C7-07D5-4CAA-85E0-8F9B9CEE110C}"].Value }}</td>
    <td>{{ item.Fields["{B588A80F-A8C0-4A97-A35A-07D81ED53E9B}"].Value | formatData}}</td>
</tr>

如果 json 中没有数据项，我想在表格单元格中显示一条消息：“无可用数据”。

这是一个没有数据的 plunkr。有人可以帮我调整我的角度来呈现这条消息吗？

http://plnkr.co/edit/1B9aiNKAoEiyWwWiI7Mr?p=preview

<tr ng-repeat="item in data">
    <td colspan="3">No data available</td>
</tr>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

使用ng-if="data.length==0"

<tr ng-if="data.length === 0">
    <td> No data available </td>
</tr>

这里是plunkr

【讨论】：

优秀。谢谢！

【解决方案2】：

您需要检查长度并相应地显示隐藏部分，请参阅此

<div ng-if="data.length == 0">
  <h3> No data found!</h3>
</div>

<div ng-if="data.length > 0">
  <table...>
     <tr>....header....</tr>
     <tr ng-repeat="item in data">
        .....
     </tr>
  </table>
</div>

【讨论】：

【解决方案3】：

在您的第二个柱塞中，您的 data.items 数组中有一个空元素。如果 json 输出可能是一个空数组（如果有 0 个项目），那么它可以在您的 tr 之后放置 ng-repeat 指令，另一个 tr 与 ng-show 指令。像这样：

`<tr ng-repeat="item in data">
    <td>(...)</td>
    <td>(...)</td>
    <td>(...)</td>
 </tr>
 <tr ng-show="data.length=0">
      <td colspan="3">No data</td>
 </tr>'

你的 plunker 的叉子： http://plnkr.co/edit/UebdZXEf9UuOl0Dy3toA?p=preview

【讨论】：