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. — ChevCast
– ChevCast, Commented Mar 29, 2016 at 18:58
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
– cortharlow, Commented Mar 29, 2016 at 18:59
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
– Amy Blankenship, Commented Mar 29, 2016 at 18:59
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
– Amy Blankenship, Commented Mar 29, 2016 at 19:00
@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. — ChevCast
– ChevCast, Commented Mar 29, 2016 at 19:01

Community · Accepted Answer · 2017-05-23 11:52:41Z

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

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Mar 29, 2016 at 19:13

cortharlow

1351 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChevCast Over a year ago

Still doesn't explain why your other ifs weren't showing. The world may never know :(

Collectives™ on Stack Overflow

Using logic to render Angular partial view?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related