如何以Bilion格式显示数字并保存角度js?

时间:2016-07-01 06:46:05

标签: angularjs

是角度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>

如何使用我上面的代码显示该数字过滤器?

4 个答案:

答案 0 :(得分:2)

请参阅angular number filter

&#13;
&#13;
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;
&#13;
&#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(例如)时,结果如下: enter image description here

答案 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>