3

I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.

<div ng-repeat="item in list" ng-view></div>

Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:

  • item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
  • item.type == "text" returning: <div><p>TEXT</p></div>

As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.

David B
  • 3,269
  • 12
  • 48
  • 80

2 Answers2

4

I think one way you can do it is to use 'ng-if' to conditionally include html:

 <div ng-repeat="item in list">
      <div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
      <div ng-if="item.type == 'text'><div><p>TEXT</p></div>
 </div>
SomeoneHelpful
  • 86
  • 2
3

You can have only one ng-view,
take a look at this answer.

from the documentation for ng-view:

ngView is a directive that complements 
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.

Every time the current route changes,
the included view changes with it according 
to the configuration of the $route service.

Requires the ngRoute module to be installed.

What you're looking for is ng-include, combined with ng-switch, take a look at this answer on how to combine the two.

ng-include creates a new child scope, which in turn inherits from the controller. have a look at this answer for more information about the topic.

Community
  • 1
  • 1
Nitsan Baleli
  • 5,393
  • 3
  • 30
  • 52
  • Follow-up question. If I use `ng-include` I could still access the `scope` there to be able to use some data binding functions? – David B May 21 '14 at 08:18