1

In my controller displayedEntries has initilized from the ajax call and length is 3. When the page is load, it still shows the no data message before my table is filled. How could i hide this message before the displayed entries rendered with data.

<span class="h4"  ng-show="(displayedEntries | filter : { type : { name: type.name}}).length == 0">{{'public.TABLE_NO_DATA'|translate}}</span>
nolines
  • 150
  • 1
  • 15

1 Answers1

0

There is a directive of angular-translate which help you to do this. translate-cloak this directive need to be included by another script tag. (supposely available in src/directory of angular-translate

your header

<script src="../src/directive/translate-cloak.js"></script>

your HTML

<span class="h4" translate-cloak  ng-show="(displayedEntries | filter : { type : { name: type.name}}).length == 0">{{'public.TABLE_NO_DATA'|translate}}</span>

your CSS

.translate-cloak {
     display: none !important;
}

EDIT: updated the answer EDIT2 : you can follow this example

Linh Pham
  • 3,005
  • 23
  • 34
  • i already did this but not worked for this case. it still shows that span but after page refreshes. – nolines Mar 14 '16 at 12:01
  • I was made a mistake with the directive name `ng-cloak` . You can give it another try. ;) – Linh Pham Mar 14 '16 at 12:05
  • @nolines, forgive I made another mistake. :( by confusing with translate-cloak ---- I will rewrite my answer really quick – Linh Pham Mar 14 '16 at 12:10
  • translate-cloak is worked as well. but it gives a little bit delay, too weird. – nolines Mar 14 '16 at 12:40
  • @nolines. it supposed to be like that. Since things got synchronized and only display after all the transate done. It is hard for the performance ofc. And also this is why the directive not implemented as default. ---- P.S. You can also try to remove that ```ng-show``` if it is not necessary. – Linh Pham Mar 14 '16 at 13:32