如何正确地将“选择”选项与 API 调用绑定？答案

【问题标题】：How do I correctly bind 'select' option with an API call?如何正确地将“选择”选项与 API 调用绑定？
【发布时间】：2016-07-13 18:51:10
【问题描述】：

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

<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 元素选择另一种类型的货币时，绑定到“搜索”的数据是 (currency, rate) -- key, value 对中的汇率。

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

例如：如果我在选择元素中选择“EUR”，“搜索”将绑定到 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

【问题讨论】：

标签： javascript html angularjs json restful-url

【解决方案1】：

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

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

value as text for item/obj in collection 容易记住

【讨论】：

好人，这很完美，我会在 4 分钟内接受你的回答：P