javascript - 如何将 'select' 选项正确绑定(bind)到 API 调用？

Question

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

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

还有我的 Controller :

(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 绑定(bind)到 HTML 元素，并且完美适用于设置为“USD”的默认值。但是，当我使用 select 元素选择另一种货币时，绑定(bind)到“搜索”的数据是 (currency, rate) -- key, value 对中的汇率。

我希望它采用选择元素中显示的货币(键)并将其绑定(bind)到“搜索”而不是汇率(值)。

例如:如果我在选择元素中选择“EUR”，“搜索”将绑定(bind)到 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 很容易记住