javascript - AngularJS货币转换器中的高级货币过滤和格式化
问题描述
我以前从未问过问题，但在这个问题上停留了超过 24 小时的编码时间，我想我已经很接近了，但在网上找不到任何资源来进一步帮助我。基本上我正在尝试格式化从底部输入的新货币。
请注意，我始终使用学生和学生来表示格式和格式。我稍后会解决这个问题。
取决于用户是否选择
输入金额 = 用户输入的默认金额
符号或代码 = 这显示 $ 或 USD
代码 = 指定货币代码，例如 USD 或 EUR
符号 = 指定 $ 或任何货币符号
Place before = 放置符号或代码的真实值
美分 = 多少个小数位
分隔符 = 更改逗号/十进制格式
格式化金额 = 格式化金额
我一直在专门研究这个 customCurrency 过滤器，但我可以思考如何将对象从模板/视图传递到控制器。任何帮助将不胜感激。
控制器片段
app.filter('customCurrency', function(){
return function(input, symbol, place){
if(isNaN(input)){
return input;
} else {
var symbol = symbol || '$';
var place = place === undefined ? true : place;
if(place === true){
return symbol + input;
} else{
return input + symbol;
}
}
}
})
<ul class=" list-group">
<li class="list-group-item name">
{{ student.name }}
</li>
</ul>
</td>
<td>
<ul class="list-group">
<li class="list-group-item code">
{{ student.code | uppercase }}
</li>
</ul>
</td>
<td>
<ul class="list-group">
<li class="list-group-item">Entered Amount: {{ student.amount }}</li>
<li class="list-group-item">Type: {{ student.type | uppercase }}</li>
<li class="list-group-item">Code: {{ student.code | uppercase }}</li>
<li class="list-group-item">Symbol: {{ student.symbol | uppercase }}</li>
<li class="list-group-item">Place Before: {{ student.place | uppercase }}</li>
<li class="list-group-item">Cents: {{ student.cents | uppercase }}</li>
<li class="list-group-item">Delimiter: {{ student.delimiter | uppercase }}</li>
<li class="list-group-item">Formatted Amount: {{student.amount | customCurrency}}</li>
</ul>
控制器（完整代码）
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myctrl', ['$scope', function ($scope) {
// generates id
var empid = 1;
// Search
$scope.query = {}
$scope.queryBy = '$'
$scope.orderProp="name";
// Default Dataset
$scope.students = [{
name: 'United States',
amount: '123456',
code: 'USD',
type: 'Symbol',
symbol: '$',
place: 'true',
cents: '2',
delimiter: '#,###.##',
id: '0',
},
{
name: 'Argentina',
amount: '4500',
code: 'USD',
type: 'Code',
symbol: '$',
place: 'false',
cents: '0',
delimiter: '#,###.##',
id: '1',
},
{
name: 'Spain',
amount: '8995',
code: 'EUR',
type: 'Symbol',
symbol: 'Є',
place: 'false',
cents: '0',
delimiter: '#,###.##',
id: '2'
},
{
name: 'Germany',
amount: '150056',
code: 'EUR',
type: 'Symbol',
symbol: 'Є',
place: 'true',
cents: '0',
delimiter: '#.###,##',
id: '3'
},
];
// Options
$scope.data = {
settings: {},
currencyOptions: [{
name: 'USD'
},
{
name: 'EUR'
},
],
typeOptions: [{
name: 'Code'
},
{
name: 'Symbol'
},
],
placementOptions: [{
name: 'true'
},
{
name: 'false'
}
]
};
// Sorting
$scope.sort = {
column: '',
descending: false
};
$scope.myValue = true;
$scope.changeSorting = function (column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
$scope.selectedCls = function (column) {
return column == $scope.sort.column && 'sort-' + $scope.sort.descending;
};
//Create Record
$scope.saveRecord = function () {
var audio = new Audio('./audio/writing.mp3');
audio.play();
if ($scope.newStudent.id == null) {
$scope.newStudent.id = empid++;
$scope.students.push($scope.newStudent);
} else {
for (i in $scope.students) {
if ($scope.students[i].id == $scope.newStudent.id) {
$scope.students[i] = $scope.newStudent;
}
}
}
$scope.newStudent = {};
}
//Delete Record
$scope.delete = function (id) {
for (i in $scope.students) {
if ($scope.students[i].id == id) {
$scope.students.splice(i, 1);
$scope.newStudent = {};
}
}
var audio = new Audio('./audio/trash.mp3');
audio.play();
}
//Update Record
$scope.edit = function (id) {
for (i in $scope.students) {
if ($scope.students[i].id == id) {
$scope.newStudent = angular.copy($scope.students[i]);
}
}
var audio = new Audio('./audio/edit.mp3');
audio.play();
}
//Download Indidiual Setting Format
$scope.download = function (id) {
for (i in $scope.students) {
if ($scope.students[i].id == id) {
var data = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify($scope.students[i]));
var downloader = document.createElement('a');
downloader.setAttribute('href', data);
downloader.setAttribute('download', 'settings.json');
downloader.click();
}
}
var audio = new Audio('./audio/mouseclick.mp3');
audio.play();
};
$scope.saveJSON = function () {
var audio = new Audio('./audio/edit.mp3');
audio.play();
$scope.toJSON = '';
$scope.toJSON = angular.toJson($scope.students);
var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',window.URL.createObjectURL(blob));
downloadLink.attr('download', 'fileName.json');
downloadLink[0].click();
};
// Audio Sounds
$scope.playDev= function() {
var audio = new Audio('./audio/mouseclick.mp3');
audio.play();
};
// $scope.playTrash= function() {
// var audio = new Audio('./audio/trash.mp3');
// audio.play();
// };
// $scope.playEdit= function() {
// var audio = new Audio('./audio/edit.mp3');
// audio.play();
// };
}])
//Custom Currency Filter
app.filter('customCurrency', function(){
return function(input, symbol, place){
if(isNaN(input)){
return input;
} else {
var symbol = symbol || '$';
var place = place === undefined ? true : place;
if(place === true){
return symbol + input;
} else{
return input + symbol;
}
}
}
})
//Comma to Decimal
app.filter('commaToDecimal', function(){
return function(value) {
return value ? parseFloat(value).toFixed(3).toString().replace('.', ',') : null;
};
});
// Decimal to Comma
app.filter('decimal2comma', [
function() {// should be altered to suit your needs
return function(input) {
var ret=(input)?input.toString().replace(".",","):null;
if(ret){
var decArr=ret.split(",");
if(decArr.length>1){
var dec=decArr[1].length;
if(dec===1){ret+="0";}
}//this is to show prices like 12,20 and not 12,2
}
return ret;
};
}]);
index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.6/ui-bootstrap.js"
integrity="sha512-3z5zbCPEG7DvKKz46yvPmKL+w+UDfwY0f2YWFVIwBb+2Y4E23jTZHZxG+naAiTllvMNQAhapPDKGHBT7V3fQOA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="./style.css" />
<script src="https://kit.fontawesome.com/8cc1b75eb3.js" crossorigin="anonymous"></script>
<title>Currency Format Manager</title>
<script src="angularCrud.js"></script>
</head>
<body>
<div class="container">
<div ng-app="myApp" class="myApp" ng-controller="myctrl">
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<h2 class="main-block blockmainTitle text-center">Currency Format Manager</h2>
</nav>
<div class="input-group">
<input ng-model="query[queryBy]" type="text" class="form-control" placeholder="Type Any Word to Filter..." aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">Keyword Search</span>
</div>
<!-- Table Begins -->
<div class="table-container">
<table style="background-color: rgba(248, 230, 251, 0.959);" class="table table-striped table-responsive"
border="0" bordercolor="teal">
<thead class=" thead-dark">
<tr class="tableHead">
<th ng-class="selectedCls('country')" ng-click="changeSorting('country')" scope="col">Country
<i class="glyphicon glyphicon-sort-by-alphabet-alt" ng-show="sort.descending"></i>
<i class="glyphicon glyphicon-sort-by-alphabet" ng-show="!sort.descending"></i>
</th>
<th ng-class="selectedCls('code')" ng-click="changeSorting('code')" scope="col">Code
<i class="glyphicon glyphicon-sort-by-alphabet-alt" ng-show="sort.descending"></i>
<i class="glyphicon glyphicon-sort-by-alphabet" ng-show="!sort.descending"></i>
</th>
<!-- <th scope="col">Formatted Amount</th> -->
<th scope="col">Format Selected</th>
<th>Actions</th>
</tr>
</thead>
<tr style="color:teal" ng-repeat="student in students | filter:query | orderBy:sort.column:sort.descending"">
<td>
<ul class=" list-group">
<li class="list-group-item name">
{{ student.name }}
</li>
</ul>
</td>
<td>
<ul class="list-group">
<li class="list-group-item code">
{{ student.code | uppercase }}
</li>
</ul>
</td>
<td>
<ul class="list-group">
<li class="list-group-item">Entered Amount: {{ student.amount }}</li>
<li class="list-group-item">Type: {{ student.type | uppercase }}</li>
<li class="list-group-item">Code: {{ student.code | uppercase }}</li>
<li class="list-group-item">Symbol: {{ student.symbol | uppercase }}</li>
<li class="list-group-item">Place Before: {{ student.place | uppercase }}</li>
<li class="list-group-item">Cents: {{ student.cents | uppercase }}</li>
<li class="list-group-item">Delimiter: {{ student.delimiter | uppercase }}</li>
<li class="list-group-item">Formatted Amount: {{student.amount | customCurrency}}</li>
</ul>
</td>
<td id="action-btns" class="btn-group">
<ul class="list-group">
<li class="list-group-item">
<button type="button" ng-click="edit(student.id)" class="blue-block btn btn-info btn-lg btn-block">
<a href="#end">
<i class=" fas fa-edit"></i>
</a>
</button>
</li>
<li class="list-group-item">
<button type="button" ng-click="download(student.id)"
class="btn btn-lg btn-success green-block btn-block">
<a href="#end">
<i class="fas fa-download"></i>
</a>
</button>
</li>
<li class="list-group-item">
<button type="button" ng-click="delete(student.id)"
class="btn btn-lg btn-danger red-block btn-block">
<a href="#end">
<i class="fas fa-trash"></i>
</a>
</button>
</li>
</ul>
</td>
</tr>
</table>
<!-- Form moved -->
<form class="form">
<hr class="main-hr">
<div class="container">
<div class="form-group">
<h1>Create Format</h1>
<hr class="main-hr">
<h3>Available Format Options</h3>
<div class="row">
<label class="label label-warning">Country:</label>
<input class="fix-input" type="text" placeholder="United States" name="country" ng-model="newStudent.name" />
<label class="label label-warning">Code:</label>
<input class="fix-input" type="text" placeholder="USD" name="code" ng-model="newStudent.code" />
</div>
<div class="row">
<label class="label label-warning">Amount:</label>
<input class="fix-input" type="text" placeholder="999.99" name="amount" ng-model="newStudent.amount" />
<label class="label label-warning">Symbol:</label>
<input class="fix-input" type="text" placeholder="$" name="code" ng-model="newStudent.symbol" />
</div>
<div class="row">
<label class="label label-warning " for="sel2">Type Shown:</label>
<select ng-model="newStudent.type" class="form-control custom-select" id="sel2" value={{option.name}}>
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option ng-repeat="option in data.typeOptions">
{{option.name}}</option>
<!-- <option value="code">Currency Code | Example: EUR </option> -->
</select>
</div>
<div class="row">
<label class="label label-warning " for="sel3">Place Before:</label>
<select ng-model="newStudent.place" class="form-control custom-select" id="sel3">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option ng-repeat="option in data.placementOptions" value="{{option.name}}">
{{option.name}}</option>
<!-- <option value="before">Before Amount | Example: $999.99</option>
<option value="after">After Amount | Example: 999.99$</option> -->
</select>
<!-- </div>
<div class="row"> -->
<label class="label label-warning " for="sel4">Cents:</label>
<select ng-model="newStudent.cents" class="form-control custom-select" id="sel4">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="0">Hide | Example: $999</option>
<option value="2">Show | Example: $999.99</option>
</select>
</div>
<div class="row">
<label class="label label-warning" for="sel5">Delimiter:</label>
<select ng-model="newStudent.delimiter" class="form-control custom-select" id="sel5">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="#,###.##">Traditional | Example: #,###.##</option>
<option value="#.###,##">Alternative | Example: #.###,##</option>
</select>
</div>
<div class="row" <input type="hidden" ng-model="newStudent.id" />
<div>
<hr class="main-hr">
<tt ng-hide="myValue">model = {{newStudent}} </tt>
<h4 ng-hide="myValue">Example of Format: {{newStudent.amount}}</h4>
<h4 ng-hide="myValue">Example of Number Format with Decimal: {{newStudent.amount | number: 1}}</h4>
<h4 ng-hide="myValue">Example of Format Currency: {{newStudent.amount | currency}}</h4>
<h4 ng-hide="myValue">Example of Format with Custom Currency Symbol: {{newStudent.amount | customCurrency : newStudent.symbol }}</h4>
<h4 ng-hide="myValue">Example of Format with Custom Currency Symbol Reversed: {{newStudent.amount | customCurrency : newStudent.symbol : false }}</h4>
<h4 ng-hide="myValue">Example of Format with Custom Currency Code: {{newStudent.amount | number: 2 | customCurrency : newStudent.code}}</h4>
<h4 ng-hide="myValue">Example of Format with Custom Currency Code Reversed: {{newStudent.amount | number: 2 | customCurrency : newStudent.code : false }}</h4>
<h4 ng-hide="myValue">Example of Format with Default Currency With Comma Delimiter: {{newStudent.amount | number: 2 | commaToDecimal : newStudent.amount }}</h4>
<!-- <h4>Example of Format with Custom Currency Symbol: {{newStudent.amount | customCurrency : newStudent.symbol | commaToDecimal : newStudent.amount }}</h4> -->
<h4 ng-hide="myValue">Example of Format with Decimal to Comma Converter: {{newStudent.amount | number: 2 | decimal2comma : newStudent.amount }}</h4>
</div>
</div>
</div>
</div>
<hr class="main-hr">
</form>
<input id="save-btn" type="button" value="Submit" ng-click="saveRecord()" class="btn btn-lg btn-block btn-warning" />
<button type="button" ng-click="saveJSON()" class="btn btn-lg btn-success btn-block">
<a href="#end">
<i class="fas fa-download"></i>
</a>
</button>
<div ng-click="playDev()">
<input id="save-btn" type="button" value="Developer Mode" ng-click="myValue = !myValue" class="btn btn-lg btn-block btn-primary" />
<a name="end"></a>
</div>
</div>
</div>
<script data-require="ui-bootstrap@2.3.1" data-semver="2.3.1"
src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
解决方案
推荐阅读
- bitmap - 如何平滑宽阶梯位图？
- azure - 适用于 Linux 容器的 Azure Web 应用服务未从 docker-compose 文件中获取环境变量
- ruby-on-rails - 如何在 ActiveRecord 中处理 Rails N:M/HABTM 关系？
- spring-batch - Spring Batch 团队是否提供读取 Excel 文件的内置方式？
- git - 如何在`git add -p`期间刷新块的差异
- redis - Redis 6 多线程和多个 Redis 数据库
- react-native - 安装 @react-native-firebase/messaging 后反应原生应用程序构建失败
- javascript - 没有跨源策略的浏览器访问 iframe
- c# - 在字典中查找返回意外值
- python - Scapy 运行时错误，ValueError: Unknown pypcap network interface