0

フォームが正常に保存されたときに、フォーム ボタンのテキストを [保存] から [保存済み] に変更したいと考えています。

<form name="myForm" ng-submit="saveForm()">
  <!-- some input text fields here -->
  <button type="submit">{{buttonText}}</button>
</form>

コントローラ：

$scope.buttonText = 'Save';
$scope.saveForm = function() {
  //save operation here
  $scope.buttonText = 'Saved';
  $scope.myForm.$setPristine();
};

これは完全に機能していますが、ユーザーがフォームの値を変更してもう一度保存するときに、ボタンを「保存」にリセットするにはどうすればよいですか? 私の頭に浮かぶ 1 つの可能性は、フォームの手付かずの状態での $watch ですが、より良い解決策があると思いますか?

4

3 に答える 3

0

たとえば、スコープ プロパティにカスタム ウォッチを追加して、そのうちの 1 つが変更されたときにボタンのテキストをリセットすることができます。

<form name="myForm" ng-submit="saveForm()">
  <input type="text" ng-model="foo" />
  <button type="submit">{{buttonText}}</button>
</form>

.

$scope.$watch('foo', function(){
    $scope.buttonText = 'save';
});

各入力で ng-change を使用して、テキストをリセットする関数を呼び出すこともできますが、保守性のコストがかかるため、私の好みではありません。一方、時計は少し高価かもしれません。

監視を少し簡単にするために、モデル プロパティを 1 つのオブジェクトにネストし、$watchCollection を使用する必要があります (1.2 以降)。

于 2015-10-07T12:29:44.340 に答える
0

入力フィールドで ng-change を呼び出し、関数を記述して再度リセットすることができます。

 <input type="text" ng-model="foo" ng-change="buttonText ='save'"/>
于 2015-10-07T12:35:15.277 に答える
0

フォーム項目で ng-change イベント ハンドラーを利用して、そこでボタンの状態を変更できます。

<form name="myForm" ng-submit="saveForm()">
  <input type="text" ng-model="foo" ng-change="formChanged()" />
  <button type="submit">{{buttonText}}</button>
</form>

そしてあなたのコントローラーで：

$scope.formChanged= function() {
  $scope.buttonText = 'Save';
  //any other logic necessary
};

これは、時計を使用するよりもはるかに軽量であり、実行するアクションについてより賢くすることができます (例: 何が変更されたか、元の値に戻ったかどうかなど)。

于 2015-10-07T12:33:34.820 に答える