How to set model object as a value in AngularJS HTML select tag?

Question

I need to set an object of $scope in AngularJS HTML select tag, I will explain my requirement clearly:

Here is my angularjs script code:

$scope.departments = $http.get("getDepartmentList");

In the department scope I will get list of department objects from spring mvc controller which is fetched from database.

This department scope i will use in html select as

<select name="department" 
        ng-model="department" 
        class="form-control" 
        ng-options="department as department.deptName for department in departments" 
        class="select_form" >
        option 
        value="">Select Department</option>
</select>

When creation I am able to get department object after selecting from the select list. During modification i will have one department object which need to set and to be selected in the select list but it is not selected only the list of objects is listed without selecting the modified object during modification.

During modification I set scope of department as

$scope.department = $http.get("getDepartmentById);

So the above code will have one department object in scope but it is not selected in the list

I have tried using ng-value in the select tag as

<select name="department" 
        ng-model="department" 
        class="form-control" 
        ng-options="department as department.deptName for department in departments" 
        ng-value="department" 
        class="select_form" >
        <option value="">Select Department</option>
</select>

But of no use, can anyone help to set the object from the select list in html page.

cnorthfield · Accepted Answer · 2016-09-04 08:29:53Z

In AngularJS $http is a service that returns a promise. It runs asynchronously and you then use it's return values (or exceptions) when it's done processing.

As taken from the docs, the $http API is based on the deferred/promise APIs exposed by the $q service.

You are currently assigning a promise to $scope.departments, this is not what you want, you need to assign it the data that is resolved in the response from your spring controller.

Here is an example of how to use the $http service:

// make your request to your spring mvc controller path
$http.get("getDepartmentList").then(function(response) {

    // set the data from the response data object
    $scope.departments = response.data

}, function(error) {

    // handle any errors that may occur

});

And for your single department (i'm assuming so you can set it as selected):

// again, make your request to your spring mvc controller path 
// but this time you should perhaps include an id parameter
$http.get("getDepartmentById?id=").then(function(response) {

    // set the data from the response data object
    $scope.department = response.data

}, function(error) {

    // again, handle any errors that may occur

});

Ok i can understand but only one object will be available in the list am i correct
It depends on the data you are returning from your spring mvc controller. Looking at your code, if you make a call to getDepartmentList you should have a list of objects. You then repeat those objects in your select by using the ng-options directive (as you have now)

Collectives™ on Stack Overflow

How to set model object as a value in AngularJS HTML select tag?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related