[英]How to submit angular js form using ng-click?
I want to provide id and date though the html form and then submit these values to the js controller and execute one of my endpoint with that values (adminId and adminDate).我想通过 html 表单提供 id 和日期,然后将这些值提交给 js controller 并使用该值(adminId 和 adminDate)执行我的端点之一。 I think something is missing.
我认为缺少一些东西。
// adminForm.html // adminForm.html
<form class="form-horizontal" role="form" ng-controller="AdminController">
<input class="form-control" id="adminId" placeholder="adminId" ng-model="formInfo">
<input class="form-control" id="adminDate" placeholder="adminDate" ng-model="formInfo">
<button type="submit" ng-click="adminUpload()" class="btn btn-success">AdminUpload</button>
</form>
// AdminController.js // AdminController.js
define([], function() {
function AdminController($scope, $http) {
$scope.adminUpload = function() {
$http.get('/app/endpoint/$scope.adminId/$scope.adminDate').success(
function () {
alert("Something went wrong!");
}
).error(
function () {
alert("Everything fine!");
}
);
};
}
AdminController.$inject = ['$scope', '$http'];
return AdminController;
}
);
There are a few errors in your code, the template, and the controller.您的代码、模板和 controller 中存在一些错误。 I'll list them one by one to explain and provide one example,
我将一一列出来解释并提供一个例子,
The live example活生生的例子
https://plnkr.co/edit/G3f6X0mUVwQ4Nxj2 https://plnkr.co/edit/G3f6X0mUVwQ4Nxj2
The Explanation说明
In Template:在模板中:
ng-model
in both inputs are referencing the same model.ng-model
都引用了相同的 model。 You should make reference to different elements (or different attributes of the same element).type=submit
.type=submit
。 It's a problem because the submit default behavior is POST the form information (and load the form's action). In Controller:在 Controller 中:
'/app/endpoint/$scope.adminId/$scope.adminDate'
.'/app/endpoint/$scope.adminId/$scope.adminDate'
。 You should be fetching '/app/endpoint/(value of $scope.adminId)/( value of $scope.adminDate)'
.So I used a template literal (The strings with the back quote symbol)and concatenate the strings with the variable values.'/app/endpoint/(value of $scope.adminId)/( value of $scope.adminDate)'
。所以我使用了模板文字(带有反引号的字符串)并将字符串与变量值。$http.get
, so even when they were so used and they were part of AngularJS maybe they aren't in your version.$http.get
之后也没有成功/错误功能,所以在使用它们时也没有成功/错误功能。 AngularJS 也许它们不在您的版本中。 So, my recommendation would be to use the recommendation function which is then(successCallback, errorCallback)
then(successCallback, errorCallback)
After all this explanation the code would be在所有这些解释之后,代码将是
template
<form class="form-horizontal" role="form">
<input
class="form-control"
id="adminId"
placeholder="adminId"
ng-model="adminId"
/>
<input
class="form-control"
id="adminDate"
placeholder="adminDate"
ng-model="adminDate"
/>
<button type="button" ng-click="adminUpload()" class="btn btn-success">
AdminUpload
</button>
</form>
controller
$scope.adminUpload = function () {
const url = `/app/endpoint/${$scope.adminId}/${$scope.adminDate}`;
alert(url);
$http
.get(url)
.then(function () {
alert('Everything fine!');
}, function () {
alert('Something went wrong!');
});
};
I've found a similar question that might help you with your problem but i do not gurantee it will solve it,here's the link:我发现了一个类似的问题可能会帮助您解决问题,但我不保证它会解决它,这是链接:
Simple submit form using Angular 使用 Angular 的简单提交表单
Edit:Hope it helps ^^编辑:希望对您有所帮助^^
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.