angularjs: set selected item in dropdown from database

Question

I have few dropdowns with predefined field. Now i am making ajax call to database and fetch data. Data is coming properly from the database and i can see the array in firebug(network tab).

I want to set this data as selected in dropdown. In textbox it is simple. But i having hard time with dropdowns.

Ajax code below

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_profile.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {

                        if (data.success) {

                      $scope.formData.dob = data.dob;
                      $scope.married = data.married;
}

Html code

<input name="dob" id="dob" type="text" class="form-control textbox1" required="required" placeholder="Date of birth(dd-mm-yyyy) " ng-model="formData.dob">
<div class = "errorba" ng-show="dob">{{dob}}</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : errormarried }">    
        <select id="married" name="married" class="selector form-control" ng-model="formData.married" required="required"> 

          <option value="0" selected="selected" >Maritial Status</option>
          <option value="1" >Single</option>
          <option value="2">Married</option>

        </select>
<span class="errorba" ng-show="errormarried">{{ errormarried }}</span>
</div>

Data from ajax - 1 1 means Single.

Please advise what am i doing wrong.

change $scope.married = data.married; to $scope.formData.married = data.married; in controller since your ng-model and $scope variable in your controller is different — nivas
– nivas, Commented Jan 31, 2017 at 4:51
@nivas it worked. Thank you. Please paste it in answer. So i can accept it. — Roxx
– Roxx, Commented Jan 31, 2017 at 4:55

nivas · Accepted Answer · 2017-01-31 05:02:03Z

1

change $scope.married = data.married; to $scope.formData.married = data.married; in controller since your ng-model and $scope variable in your controller is different.

In worst case you may get error formData as undefined in your controller. so define $scope.formData = {}; before you use assign values to it.

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_profile.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {

                        if (data.success) {
                      $scope.formData = {};
                      $scope.formData.dob = data.dob;
                      $scope.formData.married = data.married;
}

edited Jan 31, 2017 at 5:02

answered Jan 31, 2017 at 4:55

nivas

3,1963 gold badges19 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

angularjs: set selected item in dropdown from database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related