AngularJS Select Control not re-binding options

Question

I have an AngularJS Select control on the page, the options are bounded dynamically based on rest query. On initial page load I can see the Select options. But as soon as I select one option, the Select control options vanish (getting emptied). If I do page refresh (browser refresh) then I can again see the options.

How to ensure the Options are always bound to select control even after selecting a value?

<select id="ddlLanguage" class="input-block-level" ng-model="languagedata" ng-options="rows1.Language for rows1 in languagedata" ></select>

myAngApp.controller('myController', function ($scope, $http) {

   $http({
     method: 'GET',
     url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('LangHelpFiles')/items?$select=Language",
     headers: { "Accept": "application/json;odata=verbose" }

     }).success(function (data, status, headers, config) {
        $scope.languagedata= data.d.results;    

     }).error(function (data, status, headers, config) {
        alert(status);
  });//end http

});//end controller

you bind both ng-model and ng-options to language-data. This is wrong. ng-model is where you want to store which element is selected, and the ng-options="... in languagedata" is which options should be avalible. — Etse
– Etse, Commented Jan 8, 2016 at 12:23

varun · Accepted Answer · 2016-01-08 12:22:30Z

4

ngModel="languagedata" is causing the issue. When you select an options, languagedata gets set to the value of the option selected and hence the options disappears. If you bind some other variable in scope to the option then that will resolve the issue.

answered Jan 8, 2016 at 12:22

varun

6624 silver badges5 bronze badges

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

Comments

zamarrowski · Accepted Answer · 2016-01-08 12:54:02Z

0

<select id="ddlLanguage" class="input-block-level" ng-model="language" ng-options="rows1.Language for rows1 in languagedata" ></select>

myAngApp.controller('myController', function ($scope, $http) {

$http({
 method: 'GET',
 url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('LangHelpFiles')/items?$select=Language",
 headers: { "Accept": "application/json;odata=verbose" }

 }).success(function (data, status, headers, config) {

    $scope.languagedata= data.d.results;
    $scope.language = $scope.languagedata[0];  

 }).error(function (data, status, headers, config) {
    alert(status);
 });//end http

})

answered Jan 8, 2016 at 12:54

zamarrowski

4832 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS Select Control not re-binding options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related