CODEWITHSUNDEEP
javascriptangularjs
bobharley
bobharley

Reputation: 702

How to dynamically add an ng-repeat attribute to an element

Is it possible to dynamically add an ng-repeat attribute to an element? If so, how?

EDIT:

I was trying to create a component that will use a custom template inside it for each items on its list.

Example

<custom-component>
  <item-template>
    <span>{{item.name}}</span>
  <item-template>
<custom-component>

Then the result shall be

<custom-component>
  <ul>
    <li ng-repeat="item in $ctrl.items">(the template)</li>
  </ul>
</custom-component>

So I tried to just set the innerHTML of the ul to a string like so:

ul.innerHtml = "<li ng-repeat="item in $ctrl.items">{{item.name}}</li>"

Upvotes: 4

Views: 104

Answers (1)

Faly
Faly

Reputation: 13346

A solution would be showing an element which have ng-repeat depending on a condition that you can change dynamically:

<div ng-switch="dynamicCondition">
    <div ng-switch-when="true" ng-repeat="item in items">Element which have ng-repeat</div>
    <div ng-switch-when="false">Element without ng-repeat</div>
</div>

Upvotes: 2

Related Questions