NG-后提交NG-点击称为动作 [英] ng-submit action called after ng-click
问题描述
我是新来AngularJS。我想由O'Reilly在AngularJS书中提到的一个演示。
我知道，当有一个在形成一个输入框，按下回车键密钥输入里面，会导致两个 NG-点击和 NG-提交来触发动作。然而，在我的情况，我只有一个输入字段，即使我不preSS输入的输入域里面的钥匙，我的NG-提交动作称为每次，当我上的复位按钮点击。
这里是code。
I am new to AngularJS. I am trying a demo mentioned in AngularJS book by O'Reilly.
I know that when there is one input field in the form, hitting enter key inside that input, would cause both ng-click and ng-submit action to be triggered. However, in my case, I have only one input field, even if I do not press enter key inside the input field, my ng-submit action is called everytime when i click on reset button.
Here is code.
<!DOCTYPE html>
<html ng-app="">
<head lang="en">
<meta charset="UTF-8">
<title>Form Submit Action</title>
</head>
<body>
<form ng-submit="requestFunding()"
ng-controller="FormController">
Estimate :
<input ng-model="estimate"/>
<br/>
Recommended :
{{recommended}}
<br/>
<Button>Fund My Start Up</Button>
<Button ng-click="reset()">Reset</Button>
</form>
<script src="Scripts/angular.js"></script>
<script>
function FormController($scope)
{
$scope.estimate = 0;
computeNeeded = function(){
$scope.recommended = $scope.estimate * 10;
};
$scope.$watch('estimate', computeNeeded);
$scope.requestFunding = function()
{
window.alert("Add More Customers First");
};
$scope.reset = function()
{
$scope.estimate = 0;
};
}
</script>
</body>
</html>
有没有逻辑的或概念上的错误？
还请指教我就当我使用AngularJS提交和重置表单的正确途径。
Is there any logical or conceptual mistake ? Please also enlighten my on the right way to submit and reset the form when I am using AngularJS.
推荐答案
在stardard HTML，你需要设置键入=复位来表明这是一个复位键：
In stardard html, you need to set type="reset" to indicate that this is a reset button:
<button type="reset" ng-click="reset()">Reset</button>
但是，你会看到一个问题，在角这种方法，因为这演示节目。当您点击重置，输入被设置为空的，而不是0 如您在code指定：
But you would see a problem with this approach in angular, as this DEMO shows. When you click Reset, the input is set to empty instead of 0 as you specify in your code:
$scope.reset = function() {
$scope.estimate = 0;
};
这样做的原因的问题是，你的 $ scope.reset 第一运行，是的覆盖在默认动作
The reason for this problem is that your $scope.reset runs first and is overwritten by the default action of the browser for the reset button (clear the form inputs).
在棱角，你需要做的不同，你需要 preventDefault ，并使用的形式。$ setPristine（）重置表单输入状态：
In angular, you need to do differently, you need to preventDefault and use form.$setPristine() to reset the form input states:
<form name="form" ng-submit="requestFunding()" ng-controller="FormController"> //give the form a name
Estimate :
<input ng-model="estimate" />
<br/>Recommended : {{recommended}}
<br/>
<button>Fund My Start Up</button>
<button ng-click="$event.preventDefault(); reset(); form.$setPristine();">Reset</button>
</form>
Quouted从文档为$ setPristine ：
Quouted from the docs for $setPristine:
设定的形式，它的原始状态。
Sets the form to its pristine state.
此方法可以被调用，以删除'NG-脏'阶级和设置
形成其原始状态（NG-原始类）。这种方法也将
传播到本表格所载的所有控制。
This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.
设置形式返回到原始状态，是非常有用
为重复使用保存或复位后一种形式。
Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.
这篇关于NG-后提交NG-点击称为动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
