Ng-else directive in angularjs

Question

how can we create the ngELSE directive in the same way as the ngIF directive?

below code for ngIfDirective . Can I 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; } } }); } }; }]; 

Answer 1

We usually use this as

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 directives like ng-if , ng-else-if and ng-else , 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> 

Answer 2

The En else task alone does not make sense.

You can simulate an else two ways using vanilla AngularJS

1. Just use canceled validation in the 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> 

Answer 3

Do this, its inverse ng-if. Just saying ! (NOT) The value has the same effect as ng-else. There are ng-else-if statements (called ng-elif ) if that is more than what you are looking for.

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

Although it literally makes no sense to create the ng-else directive, when you can simply negate the checked value in ng-if, you can change the ng-if directive to achieve the same thing

  $scope.$watch($attr.ngIf, function ngIfWatchAction(value) { if (!value) { // add the ! here instead and name this new directive ngElse 

Answer 4

In this, he explained how you can use ng-else via 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