Two different HTML with AngularJS

Issue

I'm in a condition where I've got a JSON file with all my data. Those data are generating an HTML component of my code.

The issue is that, occasionally, the component code needs to change: in particular, a <div> has to become a <a>, due to the presence of a link.

The end result should be like this:

<div class="container">
  <div class="a b c">
    content
  </div>
  <div class="a b c">
    content
  </div>
  <a href="#" class="a b c">
    content
  </div>
</div>

my data structure is something like this:

'element1':{
  'properties' = 'properties',
  'isLink' = 'true'
},
'element2':{
  'properties' = 'properties',
  'isLink' = 'false'
},

I am printing the <div> or the <a> with a loop of Angular, but can't find a clean way to tell the code something like "if 'isLink' = 'true' print an <a>, else print a <div>".

The closest solution I've found is this one below, which prints a useless span that breaks all the CSS:

<div class="container>
  <span ng-repeat="element in row.element">
    <div ng-if="element.isLink == false">
      content
    </div>
    <a ng-if="element.isLink == true">
      content
    </a>
  </span>
</div>

Has anyone a solution to make it cleaner? Thank you all.

Solution

You can do that by using ng-repeat-start and ng-repeat-end:

<div class="container">
  <div ng-repeat-start="item in array" ng-if="!item.isLink">...</div>
  <a ng-repeat-end ng-if="item.isLink" href="#">...</a>
</div>

Answered By - JB Nizet