无法通过单个按钮触发在angularJS中提交

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

来源

2016-07-26 Ayan

默认情况下，该按钮type是提交，所以你的第二个按钮也有按键式submit。如果你不希望提交该按钮形式，你应该明确地作出这样的按钮类型为button

type="button"

你也有错在resetFN代码，它应该是修改分配给纳克值-model

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

来源

2016-07-26 04:21:39

嗨@pankaj，检查我的代码在更新的问题。我试着说你的话。但是现在点击复位不起作用。 – Ayan

看看更新的答案请 –

下面

校正代码：

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

来源

2016-07-26 04:25:58 kukkuz

嘿@kukkuz你可以指导我错过了什么？ Ur代码工作正常。 – Ayan

@Tilov Yrys指出了下面的错误...... :) – kukkuz

你错过funding

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

来源

2016-07-26 04:28:16

无法通过单个按钮触发在angularJS中提交

回答

相关问题