Улучшено обновление представления AngularJS с помощью ngshow

Прямо сейчас у меня есть представление, которое использует ng-show, чтобы показать select DOM объект, когда определенные критерии выполнены и ng-show для input DOM для всех остальных случаев. Когда я делаю это и переключаюсь между двумя делами, input коробка исчезает дольше, чем когда select появляется. Задержка довольно заметна, поэтому я хочу улучшить ее, чтобы между двумя изменениями DOM была очень небольшая задержка.

Есть какой-либо способ сделать это?

<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>
Источник

1 ответ

Я не думаю, что это в любом случае связано с ng-show или скрыть, что это может зависеть от некоторых данных, которые вы ожидаете от сервера в качестве ответа. Я создал для вас простую демонстрацию, которая показывает, что в базовом ng-show/hide нет никакой ноги, если их значение установлено одновременно.

<!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>
Источник
Другие вопросы по тегам