Improving AngularJS view update with ngshow

72 Views Asked by cmata At 27 August 2015 at 17:59

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>

Original Q&A

There are 1 best solutions below

Mahaveer Jain On 27 August 2015 at 19:50

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>

Improving AngularJS view update with ngshow

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in NG-SHOW

Related Questions in ANGULARJS-VIEW

Trending Questions

Popular # Hahtags

Popular Questions