I am working on an angular webpage that showcases a list of items. Each item is displayed within a div through iteration. Below is the HTML code snippet for this functionality:
<div ng-repeat="item in items">
<div class="item-title-section">
<h1>{{item.text}}</h1>
</div>
<div class="item-special-section"
ng-show="item.type == 'FooB' ||
item.type == 'FooC' ||
item.type == 'FooD'">
<div>
<h2>Speical</h2>
<p>Type Section</p>
</div>
<div>
<span>{{item.text}}</span>
</div>
</div>
</div>
In the above code, the item-title-section is always visible. However, I only want the item-special-section to be displayed if the current item has the type B, C, or D. The issue arises when all three types are present in the list as the special section gets printed multiple times with each item's text. Is there a way in angular to ensure the creation of the html element only once?