Conditionals in angular templates

Question

I'm currently developping an app using ionic (1.3)/angular (1.5). This is my first time using angular, but I have been developping with ember.js for the past two or three years.

I'm a bit confused by how I can conditionally display stuff in templates : in ember, I would do

<div class="col-xs-12">
  {{#if condition}}
    some template..
  {{else}}
    something else
  {{/if}}
</div>

But in angular, it seems to me that you'd have to do :

<div class="col-xs-12" ng-if="condition">
  some template..
</div>
<div class="col-xs-12" ng-if="!condition>
  something else
</div>

Which to me seems really cumbersome and does not really convey the intention. Is there any other (better) way to display stuff conditionally in templates ?

Thanks a lot for your time !

http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates — Dmitri Pavlutin, Apr 28 '16 at 07:51
thanks, didn't found the link when searching. Even if I did though, I'd have hoped that something cleaner would have been added in the three years since the answer... — ksol, Apr 28 '16 at 07:57
ternary operator should be a nice practice.... depending on template size — Vanojx1, Apr 28 '16 at 07:58
@ksol Take a try with this one: https://github.com/zachsnow/ng-elif — Dmitri Pavlutin, Apr 28 '16 at 07:58

score 0 · Answer 1 · edited Apr 28 '16 at 08:27

0

There is one more way to achieve this as show in the code below:-

<div ng-switch="myVar">
  <div ng-switch-when="condition1">
     some tempelate....
  </div>
  <div ng-switch-when="condition2">
     some tempelate....
  </div>
  <div ng-switch-when="condition3">
     some tempelate....
  </div>
  <div ng-switch-default>
     some fallback template ...
  </div>
</div>

edited Apr 28 '16 at 08:27

T M

516
5
18

answered Apr 28 '16 at 08:07

Webdev

617
6
24

score -1 · Answer 2 · answered Apr 28 '16 at 07:59

-1

try this, here is working fiddle

<div ng-controller="MyCtrl">
 <div class="col-xs-12" ng-show="condition">
  some template..
 </div>
 <div class="col-xs-12" ng-show="!condition">
  something else
</div>
</div>

controller, try using changing $scope.condition=false

 var myApp = angular.module('myApp',[]);
  function MyCtrl($scope) {
   $scope.condition = true;
   //$scope.condition = false;
 }

answered Apr 28 '16 at 07:59

Devidas Kadam

944
9
19

that's exactly the same as what I'm trying to avoid, expect instead of ng-if you use ng-show – ksol Apr 28 '16 at 08:01
I think `ng-show` is better for your conditional template. Because `ng-if` requires expression or condition, for more [read this](http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide). if you still want to use `ng-if` then check the version of angular. because `ng-if` is introduced in `version 1.1.5`. [read this](http://stackoverflow.com/questions/27342106/why-is-my-ng-if-not-working-its-not-hiding-the-div) – Devidas Kadam Apr 28 '16 at 10:00

Conditionals in angular templates

2 Answers2