Angularjs设置选定的值

发布时间：2020-12-17 16:59:18 所属栏目：安全来源：网络整理

导读：在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"(

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

解决方法

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

鉴于您的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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!