如何使用ng-click提交AngularJS表单并传递参数调用后端接口？

存在的问题及修复方案： #

1. HTML表单双向绑定错误

两个输入框绑定到同一个ng-model="formInfo"，导致输入值互相覆盖，无法分别获取adminId和adminDate。

修复后的adminForm.html代码：

<form class="form-horizontal" role="form" ng-controller="AdminController" ng-submit="adminUpload()">
    <input class="form-control" id="adminId" placeholder="adminId" ng-model="formInfo.adminId">
    <input class="form-control" id="adminDate" placeholder="adminDate" ng-model="formInfo.adminDate">
    <button type="submit" class="btn btn-success">AdminUpload</button>
</form>

• 给每个输入框绑定到formInfo的不同属性（formInfo.adminId、formInfo.adminDate）
• 给form添加ng-submit="adminUpload()"，替代按钮的ng-click，更符合表单提交规范，同时避免默认提交行为

2. 控制器中URL变量未解析、回调逻辑颠倒及语法错误

• URL直接写$scope.adminId是字符串字面量，不会解析为变量值
• success和error的回调提示信息完全颠倒
• 未初始化$scope.formInfo，导致双向绑定失效
• 控制器末尾存在语法错误（多余的闭合大括号）

修复后的AdminController.js代码：

define([], function() {
    function AdminController($scope, $http) {
        // 初始化表单数据对象
        $scope.formInfo = {};

        $scope.adminUpload = function() {
            // 使用模板字符串解析变量到URL中
            const url = `/app/endpoint/${$scope.formInfo.adminId}/${$scope.formInfo.adminDate}`;
            $http.get(url)
                .success(function () {
                    alert("请求成功！");
                })
                .error(function () {
                    alert("请求出错！");
                });
        };
    }

    AdminController.$inject = ['$scope', '$http'];

    return AdminController;
});

• 初始化$scope.formInfo = {}，确保双向绑定正常工作
• 使用模板字符串将变量插入URL，正确生成接口地址
• 修正success和error的回调提示信息，符合实际逻辑
• 修复控制器末尾的语法错误，确保代码能正常加载

内容的提问来源于stack exchange，提问作者John Friday