Using Angular to bind a select dropdown to an AJAX request

Question

I have a select dropdown in HTML that has strings for display and numbers as its value. Each number is the ID of a resource that can be queries via a REST HTTP URL.

How do I bind the changing selection state of a select to a property on an Angular controller? Is it correct to use ng-change? What's the most Angularian and declarative way of doing this?

Assume for now that the select is scoped to the same controller as the function that makes the REST request.

I'm not seeing that it matches what I need just quite. Perhaps I should simplify my question, I want a change in a select to trigger a function in the controller that includes the new value of the select. I think then the function can take that value and append it to a REST query. I can bind the select already to a property on the controller, but changing the property doesn't trigger a function. — brushleaf
– brushleaf, Commented Mar 29, 2013 at 20:13

charlietfl · Accepted Answer · 2013-03-29 20:22:27Z

5

One way is to use $watch on the ng-model property in scope for the select.

$scope.selectModel='foo';
$scope.otherProperty= /* ....*/

$scope.$watch( 'selectModel', function(){
   $http.get(url, { keyName: $scope.selectModel).success(function(response) {
           $scope.otherProperty=response;
    });

})

answered Mar 29, 2013 at 20:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

brushleaf Over a year ago

Thanks, I also found that that the ng-change attribute will work as well.

charlietfl Over a year ago

as i prefaced..this is one way. I presented this one because can use $watch for many other uses within app and is extremely valuable tool in your angular arsenal

brushleaf Over a year ago

Thanks charlietfl, I agree your answer is better and broader, that's why I marked it accepted and upvoted it. I was just noticing that there is at least one other select specific way.

charlietfl Over a year ago

curious what other way is, I just started with angular not long ago, still figuring out variations

brushleaf Over a year ago

As I said, ng-change allows you to call a function on the controller, which in turn can make the AJAX call. I think yours is a better approach because at the moment I'm having issues with two way binding, going from model back to the view.

Collectives™ on Stack Overflow

Using Angular to bind a select dropdown to an AJAX request

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related