AngularJS选择控件不重新绑定选项

Question

我在页面上有一个AngularJS Select控件，选项是基于rest查询动态绑定的。在初始页面加载时，我可以看到"选择"选项。但一旦我选择了一个选项，"选择"控制选项就会消失（清空）。如果我进行页面刷新（浏览器刷新），那么我可以再次看到选项。

如何确保选项始终绑定到选择控件，即使在选择值之后也是如此？

<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

Answer 1

ngModel="languagedata"导致该问题。当您选择一个选项时，languagedata将被设置为所选选项的值，因此选项将消失。如果您将作用域中的其他变量绑定到该选项，那么这将解决问题。

Answer 2

<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
})