0

長い計算フォームがあり、最初の結果を表示するためにいくつかの値を事前入力したいと考えています。これらの初期値は、簡単に編集できるようにテンプレートに含める必要があります。角度のある方法は、入力値フィールドを読み取り、これらの値でアプリを初期化するディレクティブを使用することです。

入力フィールドからモデル値を設定する 1 つの方法を次に示します。

<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>

コーヒースクリプト:

app = angular.module 'forms', []

app.directive 'ngInitial', ->
  restrict: 'A'
  controller: ['$scope', '$element', '$attrs', '$parse', ($scope, $element, $attrs, $parse) ->
    val = $attrs.sbInitial || $attrs.value
    getter = $parse($attrs.ngModel)
    setter = getter.assign
    setter($scope, val)
]

出典:デフォルト値からの Angular js init ng-model

残念ながら、これは私のアプリでは機能しません。値は表示されますが、結果は計算されません。計算を開始するには、ブラウザーのフィールドに手動で入力する必要があります。

次のように、入力フィールドはコントローラーで監視されます。

$scope.$watch(
  'inputValues.permeatCapacity',

  function (newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }

    permeatCapacity = $scope.inputValues.permeatCapacity;
    permeatPerDay = permeatFactory.getPermeatPerDay(permeatCapacity);

    $scope.permeatPerDay = $filter('number')(permeatPerDay, 2);
  }
);

この問題に最適なディレクティブは何ですか?または Angular.js でより良い方法はありますか?

アップデート

コントローラーで、バインドされた計算を利用する初期化後に入力フィールドを更新するための非常に汚い方法を見つけました。悪い考えのように感じるだけでなく、初期値もテンプレートに存在しません。

$timeout(function () {
  $scope.inputValues.overallRecovery = 40;
  $scope.inputValues.permeatCapacity = 7.2;
}, 0);

比較すると、コントローラーのこの最初のオブジェクトはフィールドに入力しますが、ウォッチャーをトリガーしません (バインドされた計算にとって重要です)。

$scope.inputValues = {
  overallRecovery: 40,
  permeatCapacity: 7.2
};

しかし、これを行うためのより良い方法がありますね。

4

2 に答える 2

0

質問を完全に理解していない限り、なぜこれに指示が必要なのかわかりません。スコープ内でモデルをスピンアップし、コントローラーのどこに値を設定してから、ngmodel を使用してそれらをバインドします。

コントローラーで：

scope.inputValues = {permeatCapacity: 1};
scope.calc = function(){
 return permeatFactory(scope.inputValues.perMeatCapacity);
};

ビューで：

<input ng-model="inputValues.permeatCapacity" type="text">

<button ng-click="calc()" />

angularのそれ以降のバージョンでは、ng-changeを使用してモデルの値が変更されるように計算を実行することもできます。

于 2013-09-25T19:23:03.010 に答える