if/elif/else directives for AngularJS

Downloads in past


5830.1.49 years ago9 years agoMinified + gzip package size for ng-elif in KB


A simple collection of control flow directives: ng-if, ng-else-if, and ng-else.
All directives support animations via $animate. ng-if can be used on the same element as ng-repeat, just like the "real" ng-if that it overrides. The primary caveat is that a given if/else-if/else construct must exist in the same AngularJS scope (hence it doesn't make sense to say that either ng-else-if or ng-else work with ng-repeat, as ng-repeat introduces a new scope -- obviously you can use it within an ng-repeat, or any other directive). Similarly, while using an ng-if on an ng-include is supported, note that ng-include introduces a new scope, so that the ng-if is actually not on the same scope as it would appear based solely on the structure of the DOM. This means that the following won't work because, despite appearances, ng-if and ng-else are actually in sibling scopes:
<div ng-if="someTest" ng-include="'someTemplate'"></div>
<div ng-else="someTest" ng-include="'someOtherTemplate'"></div>

Check out a live demo.


  1. AngularJS.


  • Load elif.js.

  • Add elif as a dependency to your angular module.

angular.module('yourModule', [
  // ... other dependencies ...

  • Use ng-if, ng-else-if, and ng-else in your templates. You can also
use ng-elif as an alias for ng-else-if if you prefer.


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

  More nonsense.

<h1 ng-if="anotherIfElse">...</h1>
<h1 ng-elif="elifForPythonProgrammers">...</h1>
<h1 ng-else>...</h1>

It's a pretty silly example I suppose.
Note: in the above example, contrary to what you might expect coming from a sequential programming language, someOther && condition is evaluated each digest even if someCondition is true. Each test expression is evaluated once per digest regardless of the expressions' values.


To build a release and run tests:
$ npm install
$ bower install
$ gulp test