Using logic to render Angular partial view?

Question

I am creating a new front end website for an editorial company using WordPress as a backend and Angular as a front end with Node/Express middleware for server side rendering.

The editorial has four different article types: featured, quick, quick short, and video. Each of these have significantly different styles and I need to be sure that they are rendering correctly based on the article type. The types are denoted by a flag in the article JSON object as 1, 2, 3, or 4.

Initially I tried to using ng-if as a way to sort between these types:

    <!-- Lead Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 1">
      Lead Article Content
    </div>

    <!-- Quick Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 2">
       Quick Article Content
    </div>

    <!-- Quick Short Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 3">
       Quick Short Article Content
    </div>

    <!-- Video Article -->
    <div ng-if="posts.thisPost[0].acf.post_type == 4">
       Video Article Content
    </div>

Incredibly simple, obviously it doesn't work. It will only render the first div if the post type is 1, but for all others nothing is shown. I was hoping they would filter down the divs like if, else if, else if statements but it doesn't work that way.

Is there any alternative to this? Or, even better, is there a way to check for the post type flag in JavaScript and direct the view to the correct partial if each were in a separate partial file?

I think we need more code. I don't understand why the others wouldn't show if the post_type was 2, 3, or 4. — Chev
So it should work if post_type is 2, 3, or 4? Because they definitely were but nothing displayed. I don't know what other code to show you, nothing else is really relevant. — cortharlow
How bout creating an array of template urls, then` ng-include="urls[posts.thisPost[0].acf.post_type-1]"`? BTW, you may want to use your controller to simplify that expression. — Amy Blankenship
Also, there's an ng-switch that might fit your use case better, if you want to stick with something closer to what you have. — Amy Blankenship
@cortharlow Yeah I don't see why not. You could also try changing ng-if to ng-show to debug and see if that changes anything. Show us the code where the post_type can get changed or where posts comes from. I suspect you may need a $scope.$apply call somewhere. — Chev

cortharlow cortharlow · Accepted Answer · 2016-03-29T19:13:22

For my purposes, ng-switch ended up being the appropriate solution.

Thanks to @AmyBlankenship for bringing it to my attention, and this Stack Overflow question provides the basis for why this is the correct action: ngIf and ngSwitch AngularJS

Using logic to render Angular partial view?

1 Answers