angularjs 货币转换器

Question

我是 angularjs 的新手。我正在尝试构建简单的货币转换器应用程序。它有 2 个下拉菜单，“发件人”货币和“收件人”货币。 'To' 货币目前只有 1 个选项：INR。我正在尝试在警报框中显示转换结果，因为给定的金额和汇率是硬编码的。代码如下：

<!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()。我可以和switch一起做吗？

我读到的关于 switch 的大多数帮助主要集中在显示而不是计算部分，即汇率:(

Answer 1

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

Q1：如果您使用国家代码等创建数组，则可以使用 ng-repeat 循环遍历该数组。您可以使用它来绑定和扩展选择器中的选项列表.向数组添加新项目会自动将其添加到 ng-repeat，因此它会立即成为用户的新选项。

Q2：如果你想在你的按钮上触发警报，你需要使用$scope.generate = function() { }将函数实际添加到你的范围。然后，通过将ng-click="generate()添加到你的按钮，你可以触发它。示例见下方添加的 sn-p。

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 语句更灵活的方式处理来自用户的输入。您可以查看我用来添加“From”-currency 的代码并将其复制为“To”-currency。 （例如，尝试在输入字段中输入值“Something”和“100”。）