如何使用 API 调用正确绑定 'select' 选项?
How do I correctly bind 'select' option with an API call?
我正在尝试编写一个简单的 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 摘录:
{ "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
}
}
你很接近,只需要稍微调整一下你的ngOptions
语法:
ng-options="currency as currency for (currency, rate) in exRates.rates"
用value as text for item/obj in collection
容易记住
我正在尝试编写一个简单的 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 摘录:
{ "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
}
}
你很接近,只需要稍微调整一下你的ngOptions
语法:
ng-options="currency as currency for (currency, rate) in exRates.rates"
用value as text for item/obj in collection