如何在$ 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，Account，VirtualConnectors），那里的问题是控制器中的$ 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”初始化，我正在尝试向该功能添加新块）

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;
            }

也许是关于参数的，在这种情况下，它们有3个（实际上是4个，包括obj“ modal”），但是函数只接受2个参数（实际上是3个-包括“ obj”），该函数在其他情况下也可以工作params并不总是适合参数...在Internet中，关于“ params”的信息不多，因此我无法理解此处绑定html和controller的逻辑。 显然，在html文件函数CreateData中，将“ modal_id”，“ Name”，“ VtypeID”和“ RunAsId”作为参数，因此在控制器中，应将此函数设置为可以接受此类数据类型（obj，string，string ，字符串），但是有（obj，数据，额外），我尝试更改控制器中的函数参数： $scope.createData = function (obj, data, extra, string) {... ，但它没有没有帮助...我想我应该为这种情况编写另一个函数，但是我应该输入什么参数呢？ 还有一件事：在这种情况下（当我需要发送作为对象属性的字符串时）使用带有ng-repeat创建的选项的表格是否正确？

Answer 1

为什么将数据从输入写入所有变量？

因为，您正在将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;
        }

同样，更正“ accounts ”的params 。

您的代码中也有一些不良做法：

1. 在每个<tr>标签上使用ng-controller 。 在表级别使用
2. 不使用时传递modal_id 。
3. 在您的案例data中将name作为密码传递。 错误地命名变量没有任何意义。 如果它是一个name ，则不应使用密码来引用它。

我建议您让代码由一些专家进行审查，以避免您在代码中遵循的“不良编码习惯”。

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