0

现在我有一个视图，select当满足某些条件时使用 ng-show 显示 DOM 对象，并input在所有其他情况下使用 ng-show 显示 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>
4

1 回答 1

0

我认为它无论如何都与 ng-show 或 hide 无关，它可能取决于您期望服务器作为响应的一些数据。我为您创建了一个简单的演示，在基本的 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>
于 2015-08-27T19:50:38.797 回答