angularjs货币转换器

问题描述：

我是angularjs的新手。我正在尝试构建简单的货币转换程序。它有2个下拉菜单，从'货币'和'到'货币。到目前为止，货币只有一个选择：INR。我试图在警告框中显示转换结果，对于给定的金额和汇率是硬编码的。代码如下：angularjs货币转换器

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="myCtrl"> 
Enter amount: <input type="text" ng-model="amount"> 
Select 'From' currency: 
<select ng-model="myVar"> 
<option value="usd">USD 
<option value="eur">Euro 
<option value="gbp">GBP 
</select> 
Select 'To' currency: 
<select ng-model="myVar2"> 
<option value="inr">INR 
</select> 
<button ng-click="convert()">Convert</button> 
<script> 
var app=angular.module('myApp', []); 
app.controller('myCtrl', function($scope){ 

$scope.SwitchFunction = function(myVar){ 
switch(myVar){ 
case 'usd': alert($scope.amount + " USD equals" + $scope.amount*70 + "INR"); 
case 'eur': alert($scope.amount + " EUR equals" + $scope.amount*60 + "INR"); 
case 'gbp': alert($scope.amount + " GBP equals" + $scope.amount*80 + "INR"); 

} 
}; 
}); 
</script>

问：我无法将用户输入绑定到下拉列表。问：我想在ng-click上触发generate（）。我可以和开关一起做吗？

大多数帮助我了解交换机主要聚焦于显示，而不是计算部分即汇率:(

答

要绑定用户输入您需要在控制器绑定到这个您做的。创建一个变量定义$scope.myVariable = "Something"，例如，你也可以做到这一点通过添加，例如$scope.myArray = ["A", "B"]或$scope.myObject = {}使对象和数组

Q1：。如果创建一个数组，例如，countrycodes，可以遍历数组使用ng-repeat这可以用来绑定和展开选择器中的选项列表。数组中的新项目会自动将其添加到ng-repeat中，因此它将立即成为用户的新选项。

Q2：如果要触发按钮上的警报，则需要使用$scope.generate = function() { }实际将功能添加到示波器。然后，通过将ng-click="generate()添加到您的按钮，您可以触发它。查看下面的示例中添加的片段。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.toCurrencyList = [{ 
 
    code: "inr" 
 
    }] 
 
    $scope.fromCurrencyList = []; 
 
    $scope.fromCurrencyList.push({ 
 
    code: "usd", 
 
    value: 70 
 
    }); 
 
    $scope.fromCurrencyList.push({ 
 
    code: "eur", 
 
    value: 60 
 
    }); 
 
    $scope.fromCurrencyList.push({ 
 
    code: "gbp", 
 
    value: 80 
 
    }); 
 
    
 
    $scope.myVar = "usd"; 
 
    $scope.myVar2 = "inr"; 
 
    $scope.newFromCurrency = ""; 
 
    $scope.newValue = ""; 
 
    $scope.output = ""; 
 
    
 
    $scope.convert = function() { 
 
    for (var currencyIndex in $scope.fromCurrencyList) { 
 
     if ($scope.myVar == $scope.fromCurrencyList[currencyIndex].code) { 
 
     $scope.output = $scope.amount + "" + $scope.fromCurrencyList[currencyIndex].code + " equals " + $scope.amount * $scope.fromCurrencyList[currencyIndex].value + "" + $scope.myVar2; 
 
     alert($scope.output); 
 
     } 
 
    } 
 
    } 
 

 
    $scope.addFromCurrency = function() { 
 
    var newFromCurrency = {}; 
 
    newFromCurrency.code = $scope.newCurrency; 
 
    newFromCurrency.value = $scope.newValue; 
 
    $scope.fromCurrencyList.push(newFromCurrency) 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <div> 
 
    <label>Enter amount:</label> 
 
    <input type="text" ng-model="amount" /> 
 
    </div> 
 
    <div> 
 
    Select 'From' currency: 
 
    <select ng-model="myVar"> 
 
     <option ng-repeat="fromCurrency in fromCurrencyList" value="{{fromCurrency.code}}"> 
 
     {{fromCurrency.code}} 
 
     </option> 
 
    </select> 
 
    </div> 
 
    <div> 
 
    Select 'To' currency: 
 
    <select ng-model="myVar2"> 
 
     <option ng-repeat="toCurrency in toCurrencyList" value="{{toCurrency.code}}"> 
 
     {{toCurrency.code}} 
 
     </option> 
 
    </select> 
 
    </div> 
 
    <div> 
 
    <button ng-click="convert()">Convert</button> 
 
    {{output}} 
 
    </div> 
 

 
    <hr /> 
 

 
    <div> 
 
    <input ng-model="newCurrency" placeholder="newCurrency" /> 
 
    <input ng-model="newValue" placeholder="newValue" /> 
 
    <button ng-click="addFromCurrency()">Add to Currency List</button> 
 
    </div> 
 
</body> 
 

 
</html>

for循环控制器向您展示如何处理来自用户的输入比你的switch语句更灵活的方式。您可以查看我用来添加“发件人”的代码并将其复制到“收件人”的代码中。（例如，尝试在输入字段中输入值'Something'和'100'。）

感谢Patrick，它有所帮助。 – sidd68

angularjs货币转换器

相关推荐