ng-else directive in angularjs

Question

how can we create ngELSE directive as same as ngIF directive?

below code for ngIfDirective. Shall we customize the code for ngELSE?

var ngIfDirective = ['$animate', function($animate) {
  return {
    multiElement: true,
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',
    $$tlb: true,
    link: function($scope, $element, $attr, ctrl, $transclude) {
        var block, childScope, previousElements;
        $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {

          if (value) {
            if (!childScope) {
              $transclude(function(clone, newScope) {
                childScope = newScope;
                clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ');
                // Note: We only need the first/last node of the cloned nodes.
                // However, we need to keep the reference to the jqlite wrapper as it might be changed later
                // by a directive with templateUrl when its template arrives.
                block = {
                  clone: clone
                };
                $animate.enter(clone, $element.parent(), $element);
              });
            }
          } else {
            if (previousElements) {
              previousElements.remove();
              previousElements = null;
            }
            if (childScope) {
              childScope.$destroy();
              childScope = null;
            }
            if (block) {
              previousElements = getBlockNodes(block.clone);
              $animate.leave(previousElements).then(function() {
                previousElements = null;
              });
              block = null;
            }
          }
        });
    }
  };
}];

You directives are not there to define process using if and else and hence i believe there is no ngElse. Negation of ngif will act like ngElse. — Chandermani
– Chandermani, Commented Apr 24, 2015 at 6:27

Nidhish Krishnan · Accepted Answer · 2015-04-24 06:38:26Z

6

Normally we use like this

normal if-else

if(video == video.large){
    <!-- code to render a large video block-->
}
else{
    <!-- code to render the regular video block -->
}

AngularJS ng-if

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

But if you are too specific that you want a directive like ng-if, ng-else-if, and ng-else then use ng-elif

Working Demo

 <div ng-if="someCondition">
    ...
  </div>
  <p>
    Some random junk in the middle.
  </p>
  <div ng-else-if="someOther && condition">
    ...
  </div>
  <div ng-else-if="moreConditions">
    ...
  </div>
  <div ng-else>
    ...
  </div>

edited Apr 24, 2015 at 6:38

answered Apr 24, 2015 at 6:31

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

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

2 Comments

Ramesh Rajendran Over a year ago

Is doubt about, is first if condition is true, then the else condition will not execute or execute?

Nidhish Krishnan Over a year ago

@RameshRajendran what condition you want to be tested under this

thomaux · Accepted Answer · 2015-04-24 06:32:58Z

5

En else statement wouldn't make much sense on its own.

You can mimick an else statement in 2 ways with vanilla AngularJS

1. Simply use the negated check in a second ng-if

<div ng-if='myConditionIsTrue'></div>
<div ng-if='!myConditionIsTrue'></div>

2. use the ngSwitch directive

<div ng-switch="myCondition">
    <div ng-switch-when="true"></div>
    <div ng-switch-default></div>
</div>

answered Apr 24, 2015 at 6:32

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

Comments

J-Dizzle · Accepted Answer · 2015-04-24 06:30:47Z

1

Do this, its the reverse of ng-if. Simply saying ! (NOT) Value has the same effect as ng-else would. There are ng-else-if (called ng-elif) directives as well, if that's more what you're looking for.

<div ng-controller="myCtrl as ctrl">
    <div ng-if="ctrl.isTrue">If</div>
    <div ng-if="!ctrl.isTrue">If</div>
</div>

Though there is literally no point to creating an ng-else directive when you can simply negate the checked value in ng-if, you can modify the ng-if directive like so to achieve the exact same thing

    $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {

      if (!value) { // add the ! here instead and name this new directive ngElse

edited Apr 24, 2015 at 6:30

answered Apr 24, 2015 at 6:29

J-Dizzle

3,1996 gold badges33 silver badges49 bronze badges

1 Comment

Ramesh Rajendran Over a year ago

I know it dude, but i want ng-else, can we create a new directives for ngELSE?

Reena · Accepted Answer · 2015-04-24 06:34:56Z

1

In this it has explained how you could use the ng-else through ng-elif

Example:

<div ng-if="someTest" ng-then="theTestPassed">
  Some things that assume that "someTest" is true.
</div>
<div ng-else="theTestPassed">
  Some other things that assume that "someTest" is false.
</div>

http://zachsnow.com/#!/blog/2014/angularjs-ng-elif/

Also see this: http://plnkr.co/edit/XSPP3jZL8eehu9G750ME?p=preview

answered Apr 24, 2015 at 6:34

Reena

1,1199 silver badges17 bronze badges

2 Comments

Ramesh Rajendran Over a year ago

ng-else will call if my if condition is true?

Zach Snow Over a year ago

@RameshRajendran ng-else in this example is really just a negated ng-if. So ng-then sets theTestPassed to true when someTest is true, and then ng-else essentially checks !theTestPassed.

Collectives™ on Stack Overflow

ng-else directive in angularjs

4 Answers 4

2 Comments

1. Simply use the negated check in a second ng-if

2. use the ngSwitch directive

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1. Simply use the negated check in a second ng-if

2. use the ngSwitch directive

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related