CODEWITHSUNDEEP
jsonangularjs
9er
9er

Reputation: 1734

Angular Conditional Views?

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!

Upvotes: 0

Views: 147

Answers (2)

Kais
Kais

Reputation: 2008

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>

Upvotes: 1

ippi
ippi

Reputation: 10167

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.

Upvotes: 1

Related Questions