2016-07-13 5 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> 

그리고 내 컨트롤러 :

'검색'는 HTML 요소에 바인딩

(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; 
     }); 
    }}); 
}()); 
via ng-model을 사용하고 "USD"로 설정된 기본값을 완벽하게 작동합니다. 그러나 select 요소를 사용하여 다른 유형의 통화를 선택할 때 '검색'에 바인딩 된 데이터는 (통화, 요율) - 키, 값 쌍의 비율입니다.

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" 

쉬운 내가 할 수있을 때 나는 4 분 안에 답변을 받아,이 완벽하게 작동, value as text for item/obj in collection

+0

좋은 남자와 기억 : P –

관련 문제