gpt4 book ai didi

javascript - 无法从单个按钮触发 angularJS 中的提交

转载 作者:行者123 更新时间:2023-11-28 11:50:25 27 4
gpt4 key购买 nike

使用ng-submit 我有一个表单提交回调,即submitFN。有 2 个按钮:

  • 资助我的创业!
  • 重置

我想要的输出是单击重置按钮时,输入字段变为 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 方面完全是新手,任何帮助都是非常值得赞赏的。提前致谢。

更新我尝试过的代码之一:

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

最佳答案

默认情况下,按钮类型为提交,因此第二个按钮也具有按钮类型提交。如果您不想在该按钮上提交表单,则应明确将该按钮类型设置为 button

type="button"

您在resetFN代码中也有错误,应该修改分配给ng-model的值

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

关于javascript - 无法从单个按钮触发 angularJS 中的提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38580945/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com