javascript - 如何在 $http GET 方法中设置参数以从下拉 Angularjs 发送数据

Question

我有一个用于创建新对象的模式窗口 如您所见，有三种形式:1)简单输入以创建“名称”；2)带有“类型”的下拉菜单；3)带有“Ids”的下拉菜单；我需要从数据库中获取具有类型和 ID 的数据，正如我在浏览器和日志中看到的那样，这部分过程进展顺利，但是当我填写所有表格并尝试发送它们时，总是会出现错误，发生这种情况是因为在变量“类型”和“ID”中的服务器上写入了来自变量“名称”的数据，简而言之，它将数据从输入发送到所有变量。这是一个主要问题——为什么要将输入数据写入所有变量？这是 html:

 <tr>
      <td class="collapsing">
        <label>{{localization.common[locale].name}}</label>
      </td>
      <td>
        <input type="text" placeholder="" ng-model="Name">
      </td>
    </tr>              
    <tr ng-controller="VirtualConnectorAddCtrl">
     <td class="collapsing">
       <label>{{localization.common[locale].VTypeID}}</label>
     </td>
    <td>
     <select class="ui dropdown VTypeID" ng-model="VTypeID">
       <option ng-repeat="item in virtualType" value= "'{{item.Id}}'">{{item.Name}}</option>
     </select>
    </td>
    </tr>  
    <tr ng-controller="VirtualConnectorAddCtrl">
      <td class="collapsing">
        <label>{{localization.common[locale].account}}</label>
      </td>
      <td>
       <select class="ui dropdown RunAsId" ng-model="RunAsId">
        <option ng-repeat="list in runAccount" value= "'{{list.RunAsAccountId}}'">{{list.RunAsAccountName}}</option>
      </select>
     </td>
    ....
    <div class="ui button blue" ng-click="createData(modal_id, Name, VTypeID, RunAsId)">{{localization.common[locale].add}}</div>

我在创建“帐户”时遇到了同样的问题(您可以在左侧菜单的图像上看到:VirtualTypes、帐户、VirtualConnectors)，问题是 Controller 中的 $http 参数

$scope.createData = function (obj, data, extra) {
....
      if ($scope.dictFilter == 'accounts') {
        $http({
                method: 'GET',
                url: appID + '/Insert_Methods.asmx/Insert_RunAsAccount',                    
                params: { name: data, pasword: data}
                }).then(function successCallback(response) {
                        Modals.close(obj)
                        getData();
                    }, function errorCallback(response) {
                    });
                    return;
                } ....

当我将 'password:data' 替换为 'password:extra' 时，问题就解决了，但是对于“VirtualConnectors”，我找不到这样做的方法(所有创建进程都由函数“createData”初始化，并且我正在尝试向该函数添加新 block )

if ($scope.dictFilter == 'virtualConnectors') {
                $http({
                    method: 'GET',
                    url: appID + '/Insert_Methods.asmx/Insert_VirtualConnector',                    
                    params: {name: data, VtypeID: data, RunAsID:data }
                }).then(function successCallback(response) {
                    Modals.close(obj)
                    getData();
                }, function errorCallback(response) {
                    console.log("function createData doesn't callback");
                });
                return;
            }

可能是关于参数，在这种情况下有三个参数(实际上是 4 个，包括 obj“modal”)，但是函数只接受 2 个参数(实际上是 3 个 - 包括“obj”)，该函数适用于其他情况，并且在其他情况下，params 并不总是适合参数......在互联网上没有太多关于“params”的信息，所以我在这里无法理解绑定(bind) html 和 Controller 的逻辑。显然，在 html 文件函数 CreateData 中，将“modal_id”、“Name”、“VtypeID”和“RunAsId”作为参数，因此在 Controller 中，应该使用可以采用此类数据(obj、字符串、字符串)的参数来设置此函数, string), 但有 (obj, data, extra), 我试图改变 Controller 中的函数参数: $scope.createData = function (obj, data, extra, string) {... 它没有帮助...我想我应该为这种情况编写另一个函数，但是我应该输入什么参数？还有一件事:在这种情况下使用带有 ng-repeat 创建的选项的表单是否正确(当我需要发送一个作为对象属性的字符串时)？

Answer 1

why do it write data from input to all variables?

因为，您正在分配 data所有属性

params: {name: data, VtypeID: data, RunAsID:data }

你应该做的，

$scope.createData = function (modal_id, name, vTypeID, runAsId) {

然后:

  if ($scope.dictFilter == 'virtualConnectors') {
            $http({
                method: 'GET',
                url: appID + '/Insert_Methods.asmx/Insert_VirtualConnector',                    
                params: {name: name, VtypeID: vTypeID, RunAsID: runAsId } // <-- Check this line
            }).then(function successCallback(response) {
                Modals.close(obj)
                getData();
            }, function errorCallback(response) {
                console.log("function createData doesn't callback");
            });
            return;
        }

同样，更正params对于 ' accounts '.

您的代码中也有一些不好的做法:

1. 使用ng-controller在每个 <tr>标签。在表格级别使用它
2. 路过modal_id不使用时。
3. 路过name在你的情况下 data作为密码。错误地命名变量没有任何意义。如果它是 name ，您不应该使用密码来引用它。

我会建议您让一些专家审查您的代码，以避免您在代码中遵循的“不良编码实践”。

希望我的回答对您有所帮助:)