Angular Conditional Views?

Question

I have inherited a mess of a Angular project. I've never really messed with Angular too much but know MVC well enough to feel like I can learn. My question is I have a property of a JSON object that I want to return a different views for. (one is an archived state and one is a non-archived state) As they both have different view templates, how would I return the non-archive template if the json.status == 'archived'

I have the following as my current StateProvider's templateURL property.

templateUrl: appConfig.viewPath + 'non-archived.html?v=' + appConfig.version

should I just return multiple template urls here? Or do I have to create a whole new url path?

Thanks!

Try ng-if directive.

Leo
– Leo

2015-11-12 04:07:44 +00:00
Commented Nov 12, 2015 at 4:07 — Leo
– Leo, Commented Nov 12, 2015 at 4:07

ippi · Accepted Answer · 2015-11-12 02:33:27Z

I've gone down this road a few times, I don't think I've found the optimal way yet, but I've learned a few things.

It really all depends on when you have access to your json-object. You can pass a function to templateUrl, and send in a service.. (A service that returns your current json-object could be great, but how would you update it? Probably when you change route right? Then you have a egg-hen problem. You can't decide route until you have the json-object, but you don't have the json-object until you change route.)

But IF you have access to the json-object you could do something like this:

templateUrl: function(){
    var tpl = (json.status == 'archived') ? 'archived.html?v=' : 'non-archived.html?v=';
    return appConfig.viewPath + tpl + appConfig.version
}

But my guess is that you don't have access to the json-object until after the route has loaded.

Then I'd say the easiest way (but maybe not so pretty) is to have just one template. $scope.json = json in the controller:

<div ng-if="json.status == 'archived'"> 
    <h1>ARCHIVED</h1>
    ...
</div>

<div ng-if="json.status != 'archived'"> 
    <h1>NOT ARCHIVED</h1>
    ...
</div>

Or if you think that is too cheap, declare two routes. The whole "create a whole new url path" is not as painful as you might think. It'll be considerably less complex than trying to wedge out a value from a route before it has loaded.

weirdpanda · Accepted Answer · 2015-11-12 04:08:51Z

1

1: Try this. send json.status in $stateParams and apply condition inside stateProvider :

$stateProvider.state('home', {
  templateProvider: ['$stateParams', 'restService' , function ($stateParams, restService) {
    restService.getJson().then(function(json) {
        if (status.status == 'archived') {
              return '<div ng-include="first.html"></div>';
        } else {
              return '<div ng-include="second.html"></div>';
        }
    })
  }]
});

2 : or simply in view you can try this:

<div ng-if="json.status == 'archived'"> 
    <h1>ARCHIVED</h1>
    ...
</div>

<div ng-if="json.status != 'archived'"> 
    <h1>NOT ARCHIVED</h1>
    ...
</div>

edited Nov 12, 2015 at 4:08

weirdpanda

2,6461 gold badge22 silver badges33 bronze badges

answered Nov 12, 2015 at 3:59

Kais

2,0083 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular Conditional Views?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related