CODEWITHSUNDEEP
angularjsgrailsangularjs-ng-repeatgspprettytime
Agorreca
Agorreca

Reputation: 686

Grails and Angular: GSP plugin tag inside ng-repeat loop

I'm working in a Grails project that uses Angular.

I use a plugin called PrettyPrint in order to have "twitter like" time (i.e. formatting dates like 'moments ago').

I want to use the plugin inside a ng-repeat loop. 

<tr ng-repeat="notification in notifications">
...
    <td><prettytime:display date="${notification.date}" /></td>
...
</tr>

In the above code, the error thrown is Cannot get property 'date' on null object. (it doesn't recognize notification item from angular loop).

If I use {{notification.date}} it shows the date.

How can I deal with both, the plugin and Angular?

Upvotes: 0

Views: 572

Answers (2)

David Trang
David Trang

Reputation: 1434

Try this code in your gsp (assume you have passed notifications list to the view via the model): 

<%
  def notifications = notificationsFromModel.collect {
    [date: prettyTime.display(it.date), message: it.message]
  }
%>

<span ng-init="notifications = <%= notifications as JSON %>"></span>

<tr ng-repeat="notification in notifications">
  <td>{{ notification.date }}</td>
  <td>{{ notification.message }}</td>
</tr>

Upvotes: 1

Joshua Moore
Joshua Moore

Reputation: 24776

Put simply, you can't.

One is browser based and the other is server based. You can't use the plugin, which is server based, and call it from JavaScript in the browser.

Think it through. The ng-repeat loop is being done by the browser. When this happens the server has already finished processing the GSP and sent it to the browser. There is no opportunity for the plugin to be called then.

You will have better luck taking the date from the server and parsing it in the browser and using a browser based plugin which offers the same functionality as the Grails plugin for date formatting.

Upvotes: 2

Related Questions