Angularjs 设置选中的值答案

【问题标题】：Angularjs set the selected valueAngularjs 设置选中的值
【发布时间】：2012-12-10 07:34:21
【问题描述】：

在 html 页面中，我有一个如下所示的选择，

<select>  
    <option value="GMT-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>  
    <option value="GMT-11:00">(GMT -11:00) Midway Island, Samoa</option>  
    <option value="GMT-10:00">(GMT -10:00) Hawaii</option>  
    <option value="GMT-9:00">(GMT -9:00) Alaska</option>  
    ...  
</select>

然后我查询 REST API 并获取人员数据，例如，

person : {  
   language : "en_US",  
   timezone : "GMT-9:00"  
   ...  
}

问题：在 AngularJS 应用程序中显示此页面时，如何将“(GMT -9:00) Alaska”设置为选定的？

【问题讨论】：

以下问题是否正确？由于它有 3 次反对票，我不确定……

标签： angularjs html-select

【解决方案1】：

您可以使用 ng-model 属性将 API json 响应绑定到您的 select 输入。

根据您的 HTML，我们会得到这个选择下拉菜单，该下拉菜单将绑定到 person.timezone。

<div ng-controller="MainController">
    <select ng-model="person.timezone">
      <option value="GMT-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
      <option value="GMT-11:00">(GMT -11:00) Midway Island, Samoa</option>
      <option value="GMT-10:00">(GMT -10:00) Hawaii</option>
      <option value="GMT-9:00">(GMT -9:00) Alaska</option>
    </select>
  </div>

现在你需要控制器来实际调用 rest 服务并获取 person 对象：

function MainController($scope, $http) {
  /* query rest api and retrive the person
     this of course would be replaced with the url of your actual rest call */
  $http({method: 'GET', url: 'rest_api_response.json'}).success(function(data, status, headers, config) {
    $scope.person = data;
    // dont apply if were in digest
    if(!$scope.$$phase)
        $scope.$apply();
  }).
  error(function(data, status, headers, config) {
    console.log("error retriveing rest api response");
  });
}

对于这个示例，我刚刚创建了一个名为 "rest_api_response.json" 的文件，其中包含您的回复

{
 "language" : "en_US",
 "timezone" : "GMT-9:00"
}

Heres a plunker with the sample contained

【讨论】：

【解决方案2】：

您的下拉菜单不在 "Angular world" 中。
您没有绑定到它的模型，因此当您更改您的选择时，没有任何事情会在 Angular 世界中真正发生。

所以要么：

1.更改您的下拉菜单以使用模型绑定在“Angular 世界”中工作（然后通过将从服务器返回的值分配为选定值来轻松执行您需要的操作。）
这是一个不错的reference。

2.继续使用纯 JS 或 JQuery 等框架在非 Angular 世界中工作，并以不同的方式进行。

【讨论】：