4

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）アラスカ」を選択したものとして設定するにはどうすればよいですか？

4

2 に答える 2

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

サンプルが入ったプランカー

于 2014-08-16T23:11:40.403 に答える