Javascript 将AngularJS ng表单对象传递到ng if？_Javascript_Angularjs_Forms_Angularjs Scope_Angular Ng If

Javascript 将AngularJS ng表单对象传递到ng if？

javascript angularjs forms

Javascript 将AngularJS ng表单对象传递到ng if？,javascript,angularjs,forms,angularjs-scope,angular-ng-if,Javascript,Angularjs,Forms,Angularjs Scope,Angular Ng If,单击此处的“预览”时，预览模式下的“保存”按钮未被禁用我认为这是因为表单对象（testAddForm）在ng if的范围内不可用。我知道我应该在我的控制器中使用一个对象，因为它一直向下传递，但是表单对象是由angular创建的，在ng if中不可用。我怎样才能解决这个问题 <!DOCTYPE html> <html ng-app="app"> <head> <script data-require="angular.js@1.2.27"

单击此处的“预览”时，预览模式下的“保存”按钮未被禁用

我认为这是因为表单对象（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>

输入字段放置在ng if条件中，如果ng if为false，则其中的元素不在DOM中。由于在预览模式下，您的输入字段不在DOM中，因此在验证表单时不会考虑它

一个简单的解决方法是使用ng show，如下所示：

<div ng-show="!previewMode">

作为一种解决方法，您可以尝试使用ng hide和ng show，而不是ng if


需要标题
{{data.title}

抱歉，但我可以将其中一个标记为正确，您的答案也是正确的，而且两个答案对我来说显示的时间相同，所以我选择了名声较差的人。也谢谢你！

<div ng-show="!previewMode">

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