1

ここで「プレビュー」をクリックすると、プレビュー モードの保存ボタンが無効になりませんhttp://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i

これはフォームオブジェクト(testAddForm)がng-ifのスコープで利用できないためだと思います。コントローラーでオブジェクトを使用する必要があることはわかっていますが、フォームオブジェクトはAngularによって作成され、ng-ifでは使用できません。どうすればそれを回避できますか?

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TestController">
    <form name="testAddForm" novalidate>
      <div ng-if="!previewMode">
        <input name="title" ng-model="data.title" required />
        <p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
        <div>
          <input type="button" value="Preview" ng-click="preview(true)" />
          <input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
        </div>
      </div>
      <div ng-if="previewMode">
        <h2>{{data.title}}</h2>
        <div>
          <input type="button" value="Cancel" ng-click="preview(false)" />
          <input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
        </div>
      </div>
    </form>
  </body>

</html>

JS:

angular.module('app', []);

angular.module('app').controller('TestController', ['$scope', function($scope) {
  $scope.data = {};
  $scope.previewMode = false;
  $scope.preview = function(show) {
    $scope.previewMode = show;
  };
}]);
4

2 に答える 2

2

回避策として、ng-if の代わりに ng-hide と ng-show を使用してみてください。

plunkr の例

<form name="testAddForm" novalidate>
  <div ng-hide="previewMode">
    <input name="title" ng-model="data.title" required />
    <p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
    <div>
      <input type="button" value="Preview" ng-click="preview(true)" />
      <input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
    </div>
  </div>
  <div ng-show="previewMode">
    <h2>{{data.title}}</h2>
    <div>
      <input type="button" value="Cancel" ng-click="preview(false)" />
      <input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
    </div>
  </div>
</form>
于 2015-05-04T10:05:03.513 に答える
1

入力フィールドは ng-if 条件内に配置され、ng-if が false の場合、内部の要素は DOM にありません。プレビュー モードでは入力フィールドが DOM にないため、フォームの検証中に考慮されません。

簡単な修正は、次のように ng-show を使用することです。

<div ng-show="!previewMode">

プランカー

于 2015-05-04T10:04:43.450 に答える