Передача объекта AngularJS ng-form в ng-if?

Когда я нажимаю «предварительный просмотр» здесь кнопка сохранения в моем режиме предварительного просмотра не отключен http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i Передача объекта AngularJS ng-form в ng-if?

Я думаю, что это происходит потому, что форма объект (testAddForm) не доступен в объеме из-нг, если. Я знаю, что я должен использовать объект в своем контроллере, потому что он передается целиком, но объект формы создается угловым и недоступным в ng-if. Как я могу обойти это?

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

    <head> 
    <script data-require="angular[email protected]" 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; 
    }; 
}]);

источник

2015-05-04 burzum

В качестве временного решения можно попробовать с помощью нг скрытие и нг-шоу вместо нг-если

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>

источник

2015-05-04 10:05:03 Janar

поле ввода помещается внутри нг-, если условие, и если нг-, если ложно, то элементы внутри не в DOM. Поскольку в режиме предварительного просмотра ваше поле ввода не находится в DOM, оно не принимается во внимание при проверке формы.

легко исправить будет использовать нг-шоу, как это:

<div ng-show="!previewMode">

Plunkr

источник

2015-05-04 10:04:43 rmuller

Извините, но я мог бы просто флаг один, как правильно, ваши права, как хорошо, и оба ответа показывают одно и то же время для меня, поэтому я выбрал парня с меньшей репутацией. И тебе спасибо! – burzum

ответ

Смежные вопросы