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（）。我可以和開關一起做嗎？

大多數幫助我瞭解交換機主要聚焦於顯示，而不是計算部分即匯率:(

來源

2017-10-12 sidd68

要綁定用戶輸入您需要在控制器綁定到這個您做的。創建一個變量定義$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'。）

來源

2017-10-12 15:11:32 Patrick

感謝Patrick，它有所幫助。 – sidd68

angularjs貨幣轉換器

回答

相關問題