Multiple ng-if on the same condition - performance wise

Question

I have a html page with different element, that according to some condition (the same condition) will be shown/hidden using Angular's ng-if.

In my controller, I create a boolean variable.

$scope.myCondition = getValue();

In my view, I listen to this variable using ng-if directive.

What will be better performance wise:

Write cleaner code BUT with multiple ng-if on this condition:

<div>  
 <div ng-if="myCondition" >-- a --</div>
 <div ng-if="!myCondition">-- A --</div> 
 <div>
  -- text, text, text... --
 </div>
 <div ng-if="myCondition" >-- b --</div>
 <div ng-if="!myCondition">-- B --</div> 
 <div>
  -- text, text, text... --
 </div>
 <div ng-if="myCondition" >-- c --</div>
 <div ng-if="!myCondition">-- C --</div> 
 <div>
  -- text, text, text... --
 </div>
</div>

Write code duplication (in the view) BUT use single ng-if:

 <div ng-if="myCondition">  
     <div>-- a --</div>
     <div>
      -- text, text, text... --
     </div>
     <div>-- b --</div>
     <div>
      -- text, text, text... --
     </div>
     <div  >-- c --</div>
     <div>
      -- text, text, text... --
     </div>
    </div>
    <div ng-if="!myCondition">  
     <div>-- A --</div>
     <div>
      -- text, text, text... --
     </div>
     <div>-- B --</div>
     <div>
      -- text, text, text... --
     </div>
     <div  >-- C --</div>
     <div>
      -- text, text, text... --
     </div>
    </div>

I will prefer writing code as displayed in example No.1, since it is more maintainable. But I concerned that this way a new $watch will be created for each ng-if.
Is that correct? does Angular create new $watch for each ng-if, although this is the same static condition (not return value of some function but a simple variable).

This question asked regarding the ng-if directive but relevant also to ng-show and ng-hide

Each would have it's own watch so from performance standpoint you are correct that 2nd would be better. — charlietfl, Sep 20 '16 at 14:41

score 2 · Accepted Answer · answered Sep 20 '16 at 14:58

You're right, you will create a watcher for every used ng-if, so in terms of performance is better to use the second option.

However, if your condition is going to be evaluated only once (when the controller executes its code) you can use the one-time-binding operator :: with ng-if to avoid $watchers.

score 0 · Answer 2 · answered Sep 20 '16 at 19:01

Here is one more approach of attain same desired result similar to your 1st approach by using ng-switch.Here is the demo on how it works.

Below is your HTML by using ng-switch

<body ng-app="switchExample">
  <div ng-controller="ExampleController">
  <input type="text" ng-model ="searchTerm" ng-change="getDisplayText()"/> 
  <code>selection={{searchTerm}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="myCondition">
      <div  ng-switch-when="Home">Home page</div>
      <div  ng-switch-when="show test">Test Sample</div>
      <div  ng-switch-default>default</div>
  </div>
</div>
</body>

In your JS you will have

(function(angular) {
    'use strict';
    angular.module('switchExample', ['ngAnimate'])
        .controller('ExampleController', ['$scope', function($scope) {

            $scope.getDisplayText = function() {
                $scope.myCondition = getValue($scope.searchTerm);
            };
            $scope.myCondition = getValue('Home');

            function getValue(input) {
                var cond = input;
                if (input === 'Test') {
                    cond = 'show test';
                }
                return cond;
            };
        }]);
})(window.angular);

Using ng-switch you don't have to worry about multiple conditions and maintain cleaner code is easy unlike ng-if.

Multiple ng-if on the same condition - performance wise

2 Answers2