Different renderings using ng-if?

Question

I have a JSON feed which provides a list of search results - The list contains products and regular pages. When rendering the list, the products has a different rendering than the regular pages, which means, different HTML if it is a product or a page. How would 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 to I achieve different renderings in a ng-repeat ?

It is possible to do it differently. Did you try your approach, does it work for you? — dfsq, Sep 23 '15 at 19:11
Please try before asking. Yes it should work but now you will get all sorts of variations just for the sake of people wanting to provide answers — charlietfl, Sep 23 '15 at 19:14

score 3 · Accepted Answer · answered Sep 23 '15 at 19:14

3

Better you should use ng-include here / ng-switch

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

answered Sep 23 '15 at 19:14

Pankaj Parkar

134,766
23
234
299

@nuffsaid Glad to help you..Thanks :) – Pankaj Parkar Sep 23 '15 at 20:09

Different renderings using ng-if?

1 Answers1