Various visualizations using ng-if?

Question

I have a JSON feed that provides a list of search results. The list contains products and regular pages. When rendering a list, products have a different rendering than regular pages, which means that it is different from HTML if it is a product or page. How can i achieve this? Is it possible to do something like:

<ul>
                                <li ng-repeat="item in items">
                                    <div ng-if="item.type == 'product'>PRODUCT HTML HERE</div>
                                    <div ng-if="item.type == 'page'>PAGE HTML HERE</div>
                                </li>
                            </ul>

If not, how do I achieve different renderings in ng repeat?

Answer 1

Better you should use ng-includehere / ng-switch

<ul>
     <li ng-repeat="item in items">
           <div ng-include="item.type == 'product'? 'product.html': 'page.html'></div>
     </li>
</ul>