如何使用 API 调用正确绑定 'select' 选项？

Question

我正在尝试编写一个简单的 AngularJS 程序，该程序对提供汇率数据的 API 进行 REST 调用。该应用程序处理汇率，我这样做主要是为了教育目的。我在尝试在 HTML 中的 select 元素之间双向绑定数据时遇到问题：

<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; 
        });
    }});
}());

'search' 通过 ng-model 绑定到 HTML 元素，并且完美适用于设置为 "USD" 的默认值。但是，当我使用 select 元素来 select 另一种货币时，绑定到 'search' 的数据是 (currency, rate) -- key, value 对中的汇率。

我希望它采用 select 元素中显示的货币（密钥）并将其绑定到 'search' 而不是汇率（值）。

例如：如果我在 select 元素中选择 "EUR"，则 'search' 绑定到 0.90318 而不是 "EUR"。然后 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

Answer 1

你很接近，只需要稍微调整一下你的ngOptions语法：

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

用value as text for item/obj in collection

容易记住

如何使用 API 调用正确绑定 'select' 选项？

How do I correctly bind 'select' option with an API call?

javascript

html

angularjs

json

restful-url