Swapping speed of ng-if

Question

I'm trying to make a control show different values depending on a nearby checkbox. The code that I'm using is very similar to this:

(function (angular) {
  var module = angular.module('test', ['ngAnimate']);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.profile = [
      { key: 'Prop1', value: 'test', localValue: 'test2', local: true },
      { key: 'Prop2', value: 'hello', localValue: 'world', local: false },
    ];
  }]);
  
})(angular);
        
angular.element(document).ready(function () {
  angular.bootstrap(document, ['test']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form data-ng-controller="TestCtrl">
  <div class="form-group" data-ng-repeat="prop in profile">
    <label class="control-label">{{prop.key}}</label>
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" data-ng-model="prop.local" />
      </span>
      <input class="form-control" type="text" readonly="readonly"
             data-ng-if="!prop.local" data-ng-model="prop.value" />
      <input class="form-control" type="text"
             data-ng-if="prop.local" data-ng-model="prop.localValue" />
      <span class="input-group-addon" data-ng-if="!prop.local">(inherited)</span>
    </div>
  </div>
</form>

When the checkbox is toggled there is a brief moment when both input fields are visible at the same time, causing undesirable layout effects. It does appear correctly in the end, but I'm hoping to eliminate the lag and have them swap smoothly. (I'm assuming this is a JS performance issue related to having a lot more properties on the page, or a lot more other stuff going on elsewhere on the page.)

Is there a way I can rewrite this to get the desired effect with improved performance? Is it possible to swap just the binding instead of the whole control? Or can anyone think of something else that might be causing the delay?

Answer 1

This is caused by ngAnimate.

To disable the animations you need to disable them on the containing element.

app.directive('disableAnimate', function ($animate)
{
    return function (scope, element)
    {
        $animate.enabled(false, element);
    };
});

You can use the above directive on the container and it should disable the undesired effect.

Here is a plnkr with your example (without the effect and with ngAnimate).

http://plnkr.co/edit/3rb4yI0qg9z7HRdmsrFG?p=preview

Note that if your remove the directive you get the undesired effect even in this plnkr :)