2016-07-26 77 views
0

使用ng-submit我有一個表單提交回調,即submitFN。有2個按鈕:無法通過單個按鈕觸發在angularJS中提交

  • 資助我的創業!
  • 復位

我理想的輸出上點擊復位按鈕,輸入字段得到0與上點擊「我的基金啓動」它顯示一個警告。如何實現這一目標?

問題: 這兩個按鈕都觸發submitFN。無法重置。

代碼

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"> 
 

 

 
    </script> 
 
    <script> 
 
     var mainApp = angular.module("mainApp", []); 
 

 
     mainApp.controller('startUpController', function($scope) { 
 
     $scope.funding = { 
 
      startingEstimate: 0 
 
     }; 
 

 
     $scope.calculate = function() { 
 
      $scope.funding.needed = $scope.funding.startingEstimate * 10; 
 
     }; 
 

 
     $scope.submitFN = function() { 
 
      window.alert('Go and find more customers.') 
 
     } 
 

 
     $scope.resetFN = function() { 
 
      $scope.startingEstimate = 0; 
 
     } 
 
     }); 
 

 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <div ng-app='mainApp'> 
 
     <form ng-submit="submitFN()" ng-controller="startUpController"> 
 
      Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/> 
 
      Recommended: {{funding.needed}} 
 
      <button>Fund my startup!</button> 
 
      <button ng-click="resetFN()">Reset</button> 
 
     </form> 
 
     </div> 
 
    </body> 
 

 
</html>

我完全新手angularJS任何幫助是非常可觀的。提前致謝。

UPDATE 一個代碼,我嘗試:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"> 
 

 

 
    </script> 
 
    <script> 
 
     var mainApp = angular.module("mainApp", []); 
 

 
     mainApp.controller('startUpController', function($scope) { 
 
     $scope.funding = { 
 
      startingEstimate: 0 
 
     }; 
 

 
     $scope.calculate = function() { 
 
      $scope.funding.needed = $scope.funding.startingEstimate * 10; 
 
     }; 
 

 
     $scope.submitFN = function() { 
 
      window.alert('Go and find more customers.') 
 
     } 
 

 
     $scope.resetFN = function() { 
 
      $scope.startingEstimate = 0; 
 
     } 
 
     }); 
 

 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <div ng-app='mainApp'> 
 
     <form ng-submit="submitFN()" ng-controller="startUpController"> 
 
      Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/> 
 
      Recommended: {{funding.needed}} 
 
      <button>Fund my startup!</button> 
 
      <button type = "button" ng-click="resetFN()">Reset</button> 
 
     </form> 
 
     </div> 
 
    </body> 
 

 
</html>

回答

3

默認情況下,該按鈕type是提交,所以你的第二個按鈕也有按鍵式submit。如果你不希望提交該按鈕形式,你應該明確地作出這樣的按鈕類型爲button

type="button" 

你也有錯在resetFN代碼,它應該是修改分配給納克值-model

$scope.resetFN = function() { 
     $scope.funding.startingEstimate = 0; 
    } 
+0

嗨@pankaj,檢查我的代碼在更新的問題。我試着說你的話。但是現在點擊復位不起作用。 – Ayan

+1

看看更新的答案請 –

3
下面

校正代碼:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"> 
 

 

 
    </script> 
 
    <script> 
 
     var mainApp = angular.module("mainApp", []); 
 

 
     mainApp.controller('startUpController', function($scope) { 
 
     $scope.funding = { 
 
      startingEstimate: 0 
 
     }; 
 

 
     $scope.calculate = function() { 
 
      $scope.funding.needed = $scope.funding.startingEstimate * 10; 
 
     }; 
 

 
     $scope.submitFN = function() { 
 
      window.alert('Go and find more customers.') 
 
     } 
 

 
     $scope.resetFN = function() { 
 
      $scope.funding.startingEstimate = 0; 
 
     } 
 
     }); 
 

 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <div ng-app='mainApp'> 
 
     <form ng-submit="submitFN()" ng-controller="startUpController"> 
 
      Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/> 
 
      Recommended: {{funding.needed}} 
 
      <button>Fund my startup!</button> 
 
      <button type="button" ng-click="resetFN()">Reset</button> 
 
     </form> 
 
     </div> 
 
    </body> 
 

 
</html>

+0

嘿@kukkuz你可以指導我錯過了什麼? Ur代碼工作正常。 – Ayan

+1

@Tilov Yrys指出了下面的錯誤...... :) – kukkuz

1

你錯過funding

$scope.resetFN = function() { 
    $scope.funding.startingEstimate = 0; 
} 
相關問題