How to set params in $http GET method to send data from dropdown Angularjs

Question

I have a modal window for creating new object As you can see there three forms: 1) simple input to create "Name"; 2) A dropdown with "Types" ; 3) A dropdown with "Ids"; I need to get data with types and Ids from DB, and as I can see in the browser and logs this part of process is going well, but when I fill all the forms and try to send them, there is always appears an Error, it happens because on server in variables "Types" and "IDs" written data from variable "Name", in short words it sent the data from input to all variables. This is a main question - why do it write data from input to all variables?? This is the 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>

I had the same problem with creating "Account"(you can see on the image on left side menu: VirtualTypes, Account, VirtualConnectors), and there the issue was about $http params in controller

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

When I replace 'password:data' to 'password:extra' the problem was solved, but with "VirtualConnectors" I couldn't find the way to do this (all creating processes are initializes by function "createData", and I am trying to add new block to that function)

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

maybe it's about params, in this case there three of them (actually 4, including obj "modal"), but function acccept only 2 arguments (actually 3 -including "obj"), the function works for other cases, and in other cases params do not always fit to arguments... In internet not much information about "params", so I can't understand the logic of binding html and controller here. Obviously, in html-file function CreateData take "modal_id", "Name", "VtypeID" and "RunAsId" as arguments so in the controller this function should be set with arguments that can take such types of data (obj, string, string, string), but there is (obj, data, extra), I've tried to change function arguments in the controller: $scope.createData = function (obj, data, extra, string) {... and it doesn't help... I think I should write another function for this case, but what arguments should I put? And one more thing: is it right to use form with options created by ng-repeat for such case (when I need to send a string that is a property of an object)?

Answer 1

why do it write data from input to all variables?

Because, you are assigning data to all properties

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

you should do,

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

and then:

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

similarly, correct the params for 'accounts'.

There are several bad practices in your code as well:

1. using ng-controller on each <tr> tag. Use it on table level
2. Passing modal_id when it's not being used.
3. passing name in your case data as password. It doesn't make any sense to name variable incorrectly. IF its a name, you shouldn't use password to refer it.

I will suggest you to get your code reviewed by some expert to avoid "bad coding practices" that you are following in your code.

I hope my answer will help you :)