如何在 angularjs 中使 $http.get Url 动态化

Question

我们能否制作动态 url，就像我们从第一个下拉列表中选择一个值时，url 应该是 http://api.fixer.io/latest?base=value。

这意味着当我们在第一个下拉菜单中选择 value(USD) 时，相同的值将应用于 url(http://api.fixer.io/latest?base=USD) 的末尾，并且 json 数据将来自该 url。

Answer 1

第一个选择上的 ngModel (fromType) 将保存选定的值。因此，从 $scope.fromType 获取数据并将其添加到 url，如下所示

$http.get('http://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope .rates.push({ value: value, label: key });
        }
        i++;
    });
});

更新

好的，所以基本上我在这里做了一些假设。

1. 开始时，我们应该在第一个选择中加载所有费率 ($scope.getAllRates())
2. 当在第一个选择中选择一个汇率时，我们应该在另一个选择中加载与该货币相关的汇率 ($scope.getRate())

如果是这种情况，你的视图会是这样的

<div ng-app="CurrencyConv" ng-controller="ConvertCtrl">
    <input type="number" placeholder="0.00" ng-model="fromValue" ng-change="ConvertCurrency();" min='0'>
    <select ng-model="fromType" required ng-change="ConvertCurrency(); getRate();" ng-options="f as f.label for f in rates"></select> 

    <input type="text" placeholder="0.00" ng-model="toValue" ng-change="ConvertCurrency()">
    <select ng-model="toType" required ng-change="ConvertCurrency()" ng-options="f as f.label for f in toRates"></select>
</div>

还有控制器

App.controller('ConvertCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.rates = [];
    $scope.toRates = [];

    $scope.toType = {};
    $scope.fromType = {};
    $scope.fromValue = 1;

    $scope.getAllRates = function(){
        $http.get('https://api.fixer.io/latest').then(function(res) {
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.rates.push({ value: value, label: key });
                    }
                });
            });
    };

    $scope.getRate = function(){
       $scope.toRates = [];
       if(typeof $scope.fromType.label !== undefined){
        $http.get('https://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
                $scope.fromValue = 1;
                $scope.toValue = 0;
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.toRates.push({ value: value, label: key });
                    }
                });
                $scope.toType = $scope.toRates[0];
                $scope.ConvertCurrency();
            });
       }
    };

    $scope.ConvertCurrency = function() {
        if($scope.toRates.length > 0){
          $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
        }
    };

    //init
    $scope.getAllRates();
}]);

Here's一个笨蛋

Answer 2

将 ng-model 设置为您的选择并将该值存储在 $scope 中。发出请求时，将该值设置为参数。

    $http.get('http://api.fixer.io/latest', { params:{base: $scope.fromType.label}}).then(function(res) {
    });

Answer 3

只需将您的 ngModel 附加到您的请求网址

$scope.makeRequest = function(offset){

   $http.get('http://api.fixer.io/latest?base='+$scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope .rates.push({ value: value, label: key });
        }
        i++;
    });
   });
 }

  $scope.ConvertCurrency = function() {


    $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
 $scope.makeRequest();
};

如果您每次都需要发出不同的请求，您需要将您的请求设置在一个函数中并调用它。