CODEWITHSUNDEEP
angularjsselectangularjs-scope
Manoj Kumar
Manoj Kumar

Reputation: 41

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

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.

Upvotes: 0

Views: 669

Answers (1)

cnorthfield
cnorthfield

Reputation: 3501

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

});

Upvotes: 1

Related Questions