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?

Answer 1

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