if/else in templates

[davidc...@gmail.com]

Trying out angular, what's the best way of doing conditionals in templates? The Handlebars equivalent is this:

{{#if name}} Edit {{name}} {{else}} New Project {{/if}} 

[Pawel Kozlowski]

hi!

angular.js doesn't support conditionals in expressions
(http://docs.angularjs.org/guide/expression) so you would have to add
a function in a scope for this. This approach is encouraged as it
enables testability of if/else logic.

If you are still into having this logic in your templates you need to
keep in mind that angular is using DOM as its templating engine so the
syntax will be a bit verbose. Anyway, there are at least 2 options
available:
1) http://docs.angularjs.org/api/ng.directive:ngSwitch
2) http://docs.angularjs.org/api/ng.directive:ngShow /
http://docs.angularjs.org/api/ng.directive:ngHide

The difference is that (1) will remove nodes from the DOM while (2)
will just hide them.

You might also want to check the if directive from the angular-ui
project (http://angular-ui.github.com/) which is somehow less-verbose
version of ngSwitch.

Hope this helps,
Pawel

[Pawel Kozlowski]

hi again!

On Sat, Aug 11, 2012 at 9:22 AM, <davidc...@gmail.com> wrote:

I've just posted a longish explanation but for your particular use
case you could simply do:

{{ name || 'New Project' }} it works great for the simple use-cases
like this: http://jsfiddle.net/pkozlowski_opensource/M43xn/1/

Cheers,
Pawel

[davidc...@gmail.com]

Thanks for the response! That's kind of unfortunate that you can't use conditionals in templates. First thing I've found in Angular that *adds* boilerplate. I wonder if that's a feature being considered for the future or not. 

[Pawel Kozlowski]

hi!

On Sun, Aug 12, 2012 at 12:00 AM, <davidc...@gmail.com> wrote:
> Thanks for the response! That's kind of unfortunate that you can't use
> conditionals in templates.

In practice it is not that bad really. For simple cases you can use
sth very simple {{ myVar || 'default' }} and for more complex cases
pulling conditional logic into a controller makes sense. Usually I'm
trying to keep my templates as clean as possible and move any
computations to a controller where those can be unit-tested.

> First thing I've found in Angular that *adds*
> boilerplate. I wonder if that's a feature being considered for the future or
> not.

I would suggest spending more time playin with angular.js. What I can
see (and other people have reported this as well) is _massive_
reduction in code base (going to crazy numbers like 10x less code for
crud apps). ngSwitch is probably _the_ most verbose constructs. So
you've just bumped into the most verbose directive, don't get
discouraged by this one.

Cheers,
Pawel

[Jerzy]

 It's weird that AngularJS doesn't provide such basic feature as if/else statements. Now inserting a simple conditional using ng-switch and ng-switch-when is too bloated. It should be like {{@if expr}}  {{@else}}  {{/if}}

[Peter Bacon Darwin]

Checkout AngularUI: https://github.com/angular-ui/angular-ui/tree/master/modules/directives/if

On 5 December 2012 01:44, Jerzy <jerzyg...@gmail.com> wrote:

 It's weird that AngularJS doesn't provide such basic feature as if/else statements. Now inserting a simple conditional using ng-switch and ng-switch-when is too bloated. It should be like {{@if expr}}  {{@else}}  {{/if}}

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[dlo...@googlemail.com]

On my first steps with angular, I had similar questions. Now I understand to use other ways. Filters are very powerful for that, I think:

angular.module('yourapp').filter('ie', function(){
  return function(v, yes, no){
    return v ? yes : no;
  };
});

So with this you can use {{name | ie:"Edit "+name:"New Project"}} to get your result. 

And this is one way. If you need HTML-elemtent, use existing directives mentioned before, or create one you need. In a short time you will see very very cool and "clean" solutions for any problem. For example:

angular.module('yourapp').filter('translate', function(){
   return function(v, t, d){
     if(typeof v == 'undefined') return 'undefined';
       return (t && typeof t[v] != 'undefined') ? t[v] : (typeof d != 'undefined' ? d : v);
     };
   });

... {{e.somekey | translate:{"foo":"bar","lorem":"ipsum"} }}

:D