Binding ng-repeat to pre-rendered Content

[Christoph Rosse]

Hi,

I'm relatively new to angular and I'm currently trying to evaluate if for a work-project.

I have a page that depends a lot on google indexing so I figured to make a non-js variant as a alternative fallback.

The html that is supposed to be rendered will look a little like this:

<div id="my-entity-1">
  <p>Name: Best entity in town</p>
</div>
<div id="my-entity-2">
  <p>Name: second best entity in town</p>
</div>

The angular approach of course would be to just:

<div id="my-entity-1" ng-repeat="entity in entities">
  <p>Name: <span>{{entity.name}}</span></p>
</div>

and If I want to add some filters / sorting I can do that by adding something like:

<div id="my-entity-1" ng-repeat="entity in entities | filter:myFilter | orderBy:entity.name:reverse">

The thing is for any non-js browsers there will be no or unreadable content.

I can fix that by using ng-bind: 

<p>Name: <span ng-bind="entity.name">Best entity in town</span></p>

But am I able to use ng-repeat in a context where the "list" is rendered on the server side? If not what is the best approach to provide a non-js fallback except writing my own sorting / filtering hooks ?

[Sander Elias]

Hi Cristoph,

I'm not sure it is a good idea to begin with, but yes, it is possible. You can just pre-render the list server-side, just as you would do without angular. If angular starts, it will erase the content of the repeater and populate it, as it would in its normal usage.

Is this enough for you?

Regards

Sander