angularjs 통화 변환기

나는 angularjs를 처음 사용합니다. 간단한 통화 변환기 응용 프로그램을 만들려고합니다. 'From'통화와 'To'통화라는 두 개의 드롭 다운이 있습니다. 'To'통화는 지금까지 단 하나의 옵션 만 있습니다 : 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>

Q : 사용자 입력을 드롭 다운에 바인딩 할 수 없습니다. Q : 클릭시 generate()를 트리거하고 싶습니다. 스위치와 함께 할 수 있습니까?

I 스위치에 대해 읽어

대부분의 도움은 대부분 디스플레이가 아닌 계산 부분, 즉 환율 :(

출처

2017-10-12 sidd68

당신이에 의해 수행.이 결합하는 컨트롤러에 변수를 만들 필요가 사용자 입력을 결합하기에 초점을 맞추고 예를 들어, $scope.myVariable = "Something"을 정의 또한 예를 $scope.myArray = ["A", "B"] 또는 $scope.myObject = {}에 대한 추가하여 객체와 배열을 만들기 위해이 작업을 수행 할 수 있습니다

Q1 :.. 당신은 예를 들어 배열을 만들 경우, countrycodes, 당신이 할 수있는 루프를 그 배열을 통해 ng-repeat를 사용합니다. 선택기에서 옵션 목록을 바인딩하고 확장하는 데 사용할 수 있습니다. 배열에 새 항목이 자동으로 ng-repeat에 추가되므로 즉시 사용자를위한 새로운 옵션이됩니다.

질문 2 : 단추에 경고를 표시하려면 실제로 $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>

는 대한 루프 컨트롤러에서 어떻게 스위치 문보다 더 유연한 방법으로 사용자의 입력을 처리하는 방법을 보여줍니다. "From"을 추가하는 데 사용한 코드를 볼 수 있습니다. - "To"-currency의 코드를 복제 할 수 있습니다. 예를 들어 입력 필드에 'Something'과 '100'값을 입력 해보십시오.

출처

2017-10-12 15:11:32 Patrick

감사합니다. Patrick, 도움이되었습니다. – sidd68

답변

관련 문제