將AngularJS ng形式的對象傳遞給ng-if？

當我點擊我的預覽模式「預覽」，這裏保存按鈕沒有被禁用http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i 將AngularJS ng形式的對象傳遞給ng-if？

我想這是因爲表單對象（testAddForm）是不是在NG-IF的範圍內都有效。我知道我應該在控制器中使用一個對象，因爲它一直向下傳遞，但表單對象是通過角度創建的，並且在ng-if中不可用。我該如何解決這個問題？

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

    <head> 
    <script data-require="[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

作爲一種變通方法，您可以嘗試使用，而不是NG-如果

的NG-隱藏和NG-秀

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

輸入字段被放置在裏面NG-如果條件，如果NG-如果爲假，則元件內不在DOM。由於在預覽模式下，您的輸入字段不在DOM中，因此在驗證表單時不會將其考慮在內。

一個簡單的辦法是使用NG-顯示，像這樣：

<div ng-show="!previewMode">

Plunkr

來源

2015-05-04 10:04:43 rmuller

很抱歉，但我可能只是一個標誌作爲正確的，你的是權這兩個答案對我來說都是同時顯示的，所以我選擇了一個聲譽較低的傢伙。也謝謝你！ – burzum

將AngularJS ng形式的對象傳遞給ng-if？

回答

相關問題