是角度js的新手,目前我的数字是10000000它的显示像bilion格式数字像10,000,000如何在角js中显示?
<div class="input-group-icon">Max <span class="error">*</span>
<div class="input-group">
<input style="border-right:none;" name="investment_amount_max" ng-model="attributes.investment_amount_max" max="{{constants.globalValue.maxNumber}}"
min="{{attributes.investment_amount_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required
class="form-control input-sm m-bot15" />
<span style="border-left:none; background:none; border-color:#e2e2e4;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$sss'}}</span> </div>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.required" class="error">{{formValidation.required}}</label>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.min" class="error"> {{formValidation.minMax}} </label>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.max" class="error"> {{formValidation.numberMax}} </label>
<label for="investment_amount_min" ng-show="submittab1 && attributesForm.investment_amount_max.$error.number" class="error">{{formValidation.errorNumber}}</label>
</div>
如何使用我上面的代码显示该数字过滤器?
答案 0 :(得分:2)
angular.module('numberFilterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = 10000000000;
}]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="numberFilterExample">
<div ng-controller="ExampleController">
<label>Enter number: <input ng-model='val'></label><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br>
</div>
</div>
&#13;
如果您正在寻找一种格式化输入字段中数字的方法,我建议您在此主题上查找答案:How do I add Thousands separator to my html form
答案 1 :(得分:1)
这取决于您希望如何展示它,但这里使用过滤器example。
<强> HTML 强>
<body ng-controller="MainCtrl">
<input ng-model="number" />
{{number | numberFilter}}
</body>
<强> JS 强>
app.filter('numberFilter', function() {
return function numberWithCommas(input) {
return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
});
答案 2 :(得分:0)
默认的number
格式应该可以为您提供所需的内容。因此,而不是{{myVal}}
,您将使用{{ myVal | number}}
。
以下代码段将显示此操作:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myProg">
<script>
angular.module('myProg', [])
.controller('myController', ['$scope', function($scope) {
$scope.myVal = 1000000000;
}]);
</script>
<div ng-controller="myController">
<label>Enter number: <input ng-model='myVal'></label><br>
Standard: <span id='number-default'>{{myVal}}</span><br>
Formatted: <span id='number-default'>{{myVal | number}}</span><br>
</div>
</body>
</html>
结果,当你将其插入Plunker(例如)时,结果如下:
答案 3 :(得分:0)
https://plnkr.co/edit/r15xnq392ZaQbmqIAZT2?p=preview
<script>
angular.module("myapp",[])
.controller("myCtrl",function($scope){
$scope.vars=1909009;
})
</script>
<body ng-controller="myCtrl">
<h1>{{vars |number}}</h1>
</body>