2016-07-13 15 views
2

私は、為替レートに関するデータを提供するAPIにREST呼び出しを行う簡単なAngularJSプログラムを書こうとしています。アプリは為替レートを扱い、私は主に教育目的でこれをやっています。 私は、HTMLのselect要素間の双方向のバインドデータしようとしたときに問題があるよ:「select」オプションをAPI呼び出しに正しくバインドするにはどうすればよいですか?

<select id="currencySelect" 
     ng-model="search" 
     ng-options="currency for (currency, rate) in exRates.rates">  
</select> 

そして、私のコントローラ:

(function() { 
    "use strict"; 
    angular.module("exchangeRates") 
    .controller('getRates', function($scope, $http){ 
     $scope.$watch('search', function() { 
      fetch(); 
     }); 
    $scope.search = "USD"; 


    function fetch(){ 
     $http.get("http://api.fixer.io/latest?base=" + $scope.search) 
     .then(function(response){ 
      $scope.exRates = response.data; 
     }); 
    }}); 
}()); 

「検索」がHTML要素にバインドされていますvia ng-modelを使用し、 "USD"で設定されたデフォルト値に対して完全に機能します。ただし、select要素を使用して別のタイプの通貨を選択すると、 'search'にバインドされたデータは、(通貨、レート) - キー、値のペアのレートになります。

select要素に表示されている通貨(キー)を取って、レート(値)ではなく「検索」にバインドします。

例:select要素で「EUR」を選択した場合、「検索」は「EUR」の代わりに0.90318にバインドされます。 GETリクエストは、しようとします:

http://api.fixer.io/latest?base=0.90318

動作しません。これは、サンプルJSONの抜粋を見て助けることが

Source

{ "base":"USD", 
    "date":"2016-07-13", 
    "rates": { 
       "AUD":1.3111, 
       "BGN":1.7664, 
       "BRL":3.2981, 
       "CAD":1.3053, 
       "CHF":0.98528, 
       "CNY":6.6905, 
       "CZK":24.416, 
       "DKK":6.7177, 
       "GBP":0.75323, 
       "HKD":7.7576, 
       "HRK":6.7677, 
       "HUF":283.05, 
       "IDR":13046.0, 
       "ILS":3.8685, 
       "INR":67.03, 
       "JPY":104.61, 
       "KRW":1143.0, 
       "MXN":18.316, 
       "MYR":3.9432, 
       "NOK":8.4127, 
       "NZD":1.3687, 
       "PHP":47.13, 
       "PLN":3.979, 
       "RON":4.0565, 
       "RUB":63.801, 
       "SEK":8.5231, 
       "SGD":1.346, 
       "THB":35.18, 
       "TRY":2.8944, 
       "ZAR":14.333, 
       "EUR":0.90318 
      } 
} 

Example of the user interface

答えて

1

あなたは自分のngOptionsを調整する必要があり、接近していました少し構文:

ng-options="currency as currency for (currency, rate) in exRates.rates" 

簡単value as text for item/obj in collection

+0

良い男と覚えて、私はすることができるよとき、これは完全に働いた、私は4分であなたの答えを受け入れる:P –

関連する問題