Display message if no data in angular model

Question

I have an angular app that templates the data from json into an HTML table. Here it is showing one item.

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>

If there are no data items in the json, I would like to display a message in the table cell that says: "No data available".

Here is a plunkr with no data. Can someone help me tweak my angular to render this message?

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

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

Answer 1

use ng-if="data.length==0"

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

here is plunkr

Answer 2

You need to check the length and show hide the section accordingly, see this

<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>

Answer 3

In Your secound plunger you got one empty element in your data.items array. If the json output could be an empty array (in case with 0 items) then it could by posiible to put after your tr with ng-repeat directive, another tr with ng-show directive. Like this:

`<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>'

Fork of Your plunker: http://plnkr.co/edit/UebdZXEf9UuOl0Dy3toA?p=preview