Message on empty table Angular

Question

I am filling in a table within Angular but I want it to be able to show an error message is my array is empty, I can find the solution when its with lists but I don't know how to convert this to a table.

Any help would be appreciated!

Code:

 <table class="datatable">
  <tr>
    <th><input ng-model="allSelected" ng-change="selectAll()" type="checkbox"></th>
    <th>Image</th>
    <th>
      <div class="headerButtons"><a ng-click="order('name')">Name<i class="material-icons md-18">swap_vert</i></a></div>
    </th>
    <th>
      <div class="headerButtons"><a ng-click="order('type')">Type<i class="material-icons md-18">swap_vert</i></a></div>
    </th>
      <th>
      <div class="headerButtons"><a ng-click="order('type')">Dimensions<i class="material-icons md-18">swap_vert</i></a></div>
    </th>
        <th>
      <div class="headerButtons"><a ng-click="order('type')">Media Linkage<i class="material-icons md-18">swap_vert</i></a></div>
    </th>

  </tr>

  <tr ng-repeat="file in (filteredImageData = (imageData | filter:search | filter:myFilter))">
    <context-menu ng-init="file.hidden = true" owner="file" menu-data="contextMenuFields"></context-menu>
    <td><input ng-model="file.selected" type="checkbox"></td>
    <td><div ng-if="file.type == 'image'">
      <a ng-click="openCarousel(file,$index)"><img ng-src="http://XXXX/{{file.url}}"  width="65" height="65" get-image-resolution="file.size"></div>
      <div ng-if="file.type == 'video'">
      <a  ng-click="openCarousel(file,$index)"><i class ="material-icons md-24">videocam</i ></div>
      <div ng-if="file.type == 'audio'">
      <a ng-click="openCarousel(file,$index)"><i class="material-icons md-24">volume_up</i></div>
      </td>
      <td>
      {{file.name}}
      <div class="dropdown"><a ng-click="contextMenuFields.show($event,file)"><i class="material-icons">more_horiz</i></div></td>        

     <td>{{file.type}}<i class="greyedOut"> {{file.name | getextension}}</i></td>
     <td>{{file.size.x}}<i class="greyedOut"> x</i> {{file.size.y}}<i class="greyedOut"> px</i></td>
     <!--<td>blurp{{getRes(http://XXXX/{{file.url}})}}</td>-->
     <td>{{file.folder}}</td>

     <!--<td>{{file.type}}{{getExtension(file.name)}}</td>-->

  </tr>

</table>

seekers01 · Accepted Answer · 2016-06-29 12:42:56Z

1

Replace the code to make use of ng-if. Below is the sample code you can use:

<tr ng-if="(!filteredImageData || filteredImageData.length < 1)"> <td colspan="6">There are no records to show</td> </tr> <tr ng-if="filteredImageData" ng-repeat="file in (filteredImageData = (imageData | filter:search | filter:myFilter))">

answered Jun 29, 2016 at 12:42

seekers01

5601 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B.Wesselink Over a year ago

Cheers! Its still buggy when I am trying to do the following: <div class="info"><a ng-class='{ sel: myFilter.type == "image" }' ng-click="myFilter.type = 'image'">Image ({{getTypeLength("image")}})</a></div> Any idea why?

seekers01 Over a year ago

Try the code below:

<div class="info"><a ng-class="{true:'sel'}[myFilter.type == 'image']" ng-click="myFilter.type = 'image'">Image ({{getTypeLength("image")}})</a></div>

Hope this solves your issue... :)

Collectives™ on Stack Overflow

Message on empty table Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related