将 AngularJS ng-form 对象传递给 ng-if? [英] Passing AngularJS ng-form object into ng-if?

查看：21
本文介绍了将 AngularJS ng-form 对象传递给 ng-if?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我在此处单击预览"时，预览模式中的保存按钮未禁用http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i

我认为这是因为表单对象(testAddForm)在ng-if的范围内不可用.我知道我应该在我的控制器中使用一个对象，因为它一直传递下去，但是表单对象是由 angular 创建的，在 ng-if 中不可用.我该如何解决这个问题?

<html ng-app="app"><头><script data-require="angular.js@1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></脚本><link rel="stylesheet" href="style.css"/><script src="script.js"></script><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">标题是必需的.</p><div><input type="button" value="Preview" ng-click="preview(true)"/><input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>

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

</表单></html>

JS:

angular.module('app', []);angular.module('app').controller('TestController', ['$scope', function($scope) {$scope.data = {};$scope.previewMode = false;$scope.preview = 函数(显示){$scope.previewMode = 显示；};}]);

解决方案

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

示例 plunkr

<div ng-hide="previewMode"><input name="title" ng-model="data.title" required/><p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">标题是必需的.</p><div><input type="button" value="Preview" ng-click="preview(true)"/><input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>

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

</表单>

When I click "preview" here the save button in my preview mode is not disabled http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i

I think this is because the form object (testAddForm) is not available in the scope of the ng-if. I know that I should use an object in my controller because it's passed down all the way, but the form object is created by angular and not available in the ng-if. How can I work around that?

<!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;
  };
}]);

解决方案

As a workaround you can try using ng-hide and ng-show instead of ng-if

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

这篇关于将 AngularJS ng-form 对象传递给 ng-if?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆