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

【问题标题】：AngularJS Select Control not re-binding optionsAngularJS选择控件不重新绑定选项
【发布时间】：2016-01-08 12:13:10
【问题描述】：

我在页面上有一个 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

【问题讨论】：

您将 ng-model 和 ng-options 都绑定到语言数据。这是错误的。 ng-model 是您要存储选择的元素的位置，而 ng-options="... in languagedata" 是应该可用的选项。

标签： jquery angularjs

【解决方案1】：

ngModel="languagedata" 导致了这个问题。当您选择一个选项时，语言数据会设置为所选选项的值，因此选项会消失。如果您将范围内的其他一些变量绑定到该选项，那么这将解决问题。

【讨论】：

【解决方案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

})

【讨论】：