0

Right now I have a view that uses ng-show to show a select DOM object when certain criteria are met and ng-show for a input DOM for all other cases. When I do this and switch between the two cases, input box takes longer to disappear than when the select appears. The delay is pretty noticeable so I want to improve it so that there's very little delay between the two DOM changes.

Is there any way to do this?

<div>
  <input ng-show="field && (type == 'search' || fieldBucket[field].moreBuckets)"
         type="text" ng-model="value">
  <select class="facet-value"
          ng-show="field && type == 'filter' && !fieldBucket[field].moreBuckets"
          ng-model="value"
          ng-options="fieldBucket[field].buckets">
  </select>
</div>
cmata
  • 1
  • 1
  • Are you certain that your conditions are changing at exactly the same time? i.e. When one becomes false, does the other become true immediately? – HankScorpio Aug 27 '15 at 18:34
  • @HankScorpio I change the code a little to make it simpler here, but I'm pretty sure that they should change at the same time. Another thing that I did try was making one a `ng-hide` and the other a `ng-show` and it still had the same issue. – cmata Aug 27 '15 at 19:03
  • I don't think the issue is with ng-show, or ng-hide, or ng-if or any other directive. It's more likely that the conditions are not changed at the same time. Perhaps one of them relies on some asynchronous event like a server response? Either way, there's nothing wrong with the html you've posted. I suggest showing more of your code, including how the conditions are changing. In keeping with SO guidelines, please create a plunker that reproduces the issue if possible. – HankScorpio Aug 27 '15 at 19:36
  • @HankScorpio but from the code that I did share, both directives depend on the same three variables, so there shouldn't be any async process delaying either one. I'll work on putting a demo together that shows the process. – cmata Aug 27 '15 at 20:21
  • I misread your post a bit. I see that they both get displayed at the same time for a moment when you switch from `` to ` – HankScorpio Aug 27 '15 at 21:16
  • @HankScorpio I made a simple example and I can't reproduce the behavior. This is a small part of a much larger Angular app, so could it be a result of that? Also to re ask the question to the answer below, do you think that if I made changes so that the directives bind to a boolean variable rather than computing an Angular expression would help synchronize DOM manipulations? – cmata Aug 27 '15 at 22:44
  • It's worth trying, but really I can't say for sure. I'd expect the DOM to change at the same time for both elements. Is the app slow, generally? – HankScorpio Aug 29 '15 at 18:17

1 Answers1

0

I don't think it is anyway related to ng-show or hide it might depend on some data which you are expecting from server as response. I have created a simple demo for you that in basic ng-show/hide there isn't any leg if their value is set at same time.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div class="wrapper" ng-app="test">
      <div class="phone" ng-controller="TestCtrl" ng-init="type = 'search'">
        <a href="" ng-click="type = 'search'"> search</a>
        <a href="" ng-click="type = 'filter'"> filter</a>
        <div >
          <input ng-show="type == 'search'"
            type="text" ng-model="value">
          <select class="facet-value"
            ng-show="type == 'filter'"
            ng-model="value"
            ng-options="obj.name for obj in list">
          </select>
        </div>
      </div>
    </body>
    <script type="text/javascript">
      var app = angular.module('test', []);

      function TestCtrl($scope) {
        $scope.list = [{name : 'one'}, {name : 'two'}];
      }
  </script>
</html>
Mahaveer Jain
  • 31
  • 9
  • Do you think that if I made changes so that the directives bind to a boolean variable rather than computing an Angular expression would synchronize DOM manipulations? – cmata Aug 27 '15 at 20:24
  • Reason behind your leg might be the computing in ng-show/hide. even boolean performance is the same. it last it works upon boolean only. it evaluate your expression and express as true or false only. search filter and then ng-show="type" and ng-show="!type" it will have the same performance. – Mahaveer Jain Aug 28 '15 at 04:20