1

近くのチェックボックスに応じてコントロールに異なる値を表示させようとしています。私が使用しているコードはこれに非常に似ています:

(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>

チェックボックスが切り替えられると、両方の入力フィールドが同時に表示される短い瞬間が発生し、望ましくないレイアウト効果が発生します。最終的には正しく表示されますが、ラグをなくしてスムーズに交換できるようにしたいと考えています。(これは、ページ上にさらに多くのプロパティがあるか、ページの他の場所でさらに多くの他のことが行われていることに関連する JS パフォーマンスの問題であると想定しています。)

これを書き直して、パフォーマンスを向上させて目的の効果を得る方法はありますか? コントロール全体ではなくバインディングだけを交換することは可能ですか? または、遅延の原因となっている可能性のある他の何かを考えられる人はいますか?

4

2 に答える 2

0

現時点では、コントロールではなく内部値を調整することで、この問題を回避しています。

(function (angular) {
  var module = angular.module('test', []);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.profile = [
      { key: 'Prop1', inheritedValue: 'test', localValue: 'test2', local: true },
      { key: 'Prop2', inheritedValue: 'hello', localValue: 'world', local: false },
    ];
    
    $scope.initValue = function (prop) {
      prop.value = prop.local ? prop.localValue : prop.inheritedValue;
    }
      
    $scope.localise = function (prop) {
      if (!prop.local) {
        // save last local value when switching local -> inherited
        prop.localValue = prop.value;
      }
      $scope.initValue(prop);
    }
  }]);
  
})(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>
<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" data-ng-init="initValue(prop)">
      <span class="input-group-addon">
        <input type="checkbox" data-ng-model="prop.local"
               data-ng-change="localise(prop)" />
      </span>
      <input class="form-control" type="text"
             data-ng-readonly="!prop.local"
             data-ng-model="prop.value" />
      <span class="input-group-addon" data-ng-if="!prop.local">(inherited)</span>
    </div>
  </div>
</form>

少し面倒ですが、うまく機能しているようです。より良い解決策があるかどうか、まだ興味があります。

于 2015-04-16T07:37:16.673 に答える