Question

在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）阿拉斯加”设置为所选页面？

Answer 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>

现在您需要控制器实际调用其余服务并获取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

Answer 2

您的下拉列表不在"Angular world" 你没有绑定它的模型，所以当你改变你的选择没有什么会在角度世界中真的发生。

所以：

1.更改您下载到具有模型绑定的“Angular world”中工作（然后通过将从服务器返回的值指定为所选值，轻松执行您所需的操作。）

这是一个很好的reference。

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

Angularjs设置选定的值

2 个答案: