calling a HTTP get method to populate the result in drop down using angular JS

Question

I have all controllers defined at one place.

 $routeProvider.when(pages.hello, 
    {
      templateUrl: 'test/hello.html', 
      controller: 'myController',
      access: access.anon,
      helloPage: 'arf'
    });

My hello.html looks like this.

<select name="chooseFunc" data-ng-model="choosenFunction"  class="input-xlarge ng-pristine ng-valid" data-ng-click="fetchID()"  data-ng-change="update(choosenFunction)">
            <option value="ABCD">ABCD</option>
            <option value="CDEF">CDEF</option>            
        </select>

Now I want to call a http get method "/abc/hello" to populate the drop down like ABCD, CDEF values based on it.

I have written some thing like this.

 $scope.fetchID = function() {
        console.log("hello in fectch id"); 
        $http.get('/abc/hello').success(successCallback).error(error);        
      };

My function is not getting called. Could some help me with the following.

Calling fecthID() function on page load.
fechID() function should populate the options in select element.

I am new here. Can some one help me.

Maxim Shoustin · Accepted Answer · 2013-11-13 10:05:37Z

1

I would write controller like:

function myController($scope,$http) {

    $scope.values = [{id:"ABCD",Name:"David"},{id:"CDEF",Name:"John"}];

    $scope.selectedItem = $scope.values[0].id;

     $scope.fetchID = function() {

        $http.get('/abc/hello').success(
            function(data, status, headers, config){
                $scope.values.push(data);// play here
            }) 
        .error(error);          
      };

 $scope.fetchID(); // call
}

and hello.html with init first combo value:

   <select name="chooseFunc"        
    ng-model="selectedItem"        
     ng-options="selectedItem.id as selectedItem.id for selectedItem in values"          
     class="input-xlarge ng-pristine ng-valid"          
     data-ng-click="fetchID()"          
      data-ng-change="update(choosenFunction)"          
      ></select>

edited Nov 13, 2013 at 10:05

answered Nov 13, 2013 at 8:58

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patan Over a year ago

Thank you for answer. My JSON object will look like this. can you also tell me how do I achieve this.[{"id":"ABCD","Name":"David"},{"id":"CDEF","Name":"John"}] And I want to display some thing like this <option value="ABCD">David</option> <option value="CDEF">John</option>

Satpal · Accepted Answer · 2013-11-13 08:35:09Z

1

You can use ng-options to populate select like

<select ng-model="mySelecetdValue" ng-options="item for item in items">
</select>

To Call fecthID(), Just call it like

$scope.fetchID()

And Populate items in successCallback function

answered Nov 13, 2013 at 8:35

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

Patan Over a year ago

Thanks for replying. It would be great if you could also help me to call fetchID() function on page load and populate items.

Satpal Over a year ago

@Patan, can you provide code for successCallback which you are using

Collectives™ on Stack Overflow

calling a HTTP get method to populate the result in drop down using angular JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related