Два разных HTML с AngularJS

Question

Я нахожусь в состоянии, когда у меня есть файл JSON со всеми моими данными. Эти данные генерируют HTML компонент моего кода.

Проблема заключается в том, что иногда код компонента должен изменяться: в частности, <div> должен стать <a> из-за наличие ссылки.

Конечный результат должен выглядеть следующим образом:

<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>

моя структура данных выглядит примерно так:

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

Я печатаю <div> или <a> с al oop из Angular, но не может найти чистый способ сказать коду что-то вроде "if 'isLink' = 'true" вывести <a>, иначе вывести <div> ".

Наиболее близким решением, которое я нашел, является приведенное ниже, которое печатает бесполезный span, который ломает все 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>

Кто-нибудь решение сделать его чище? Спасибо всем.

Answer 1

Я бы заменил родительский диапазон на элемент div, потому что div имеет по умолчанию

display: block;

, в то время как span имеет

display: inline; 

, и, вероятно, именно поэтому ваш css ломаясь. Ваш html / angularjs код кажется мне вполне подходящим. Попробуйте вместо этого решить вашу css проблему.

Answer 2

Вы можете сделать это, используя ng-repeat-start и 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>