Question

我在页面AngularJs application.Below中使用了一个表单示例代码：

<form id="saveDailyCalFrm" name="saveDailyCalFrm" novalidate>
    <div class="row">
      <div class="col-sm-12">
        <span> Name :</span>
      </div>
        <div class="hoursSize">
         <input class="form-control" name="name" type="text" ng-model="name"  id="name"/>
    </div>

   <div class="row">
      <div class="col-sm-12">
        <span> Hours :</span>
      </div>
        <div class="hoursSize">
         <input class="form-control" name="hrs" type="number" ng-model="dailyHour"  id="dailyHours"/>
    </div>  

 </form>

现在如果用户点击仪表板中的记录，我将显示该记录表单，以便用户可以更新它。

当在表单中加载记录时，我需要将小时正确显示为2位小数。例如如下：

    if hour = 4 then show 4.00
    if 2.5  then show 2.50 etc

我已经在controller.js中编写了代码（timeEntry是存储记录的模型）：

$scope.dailyHour = (parseFloat($scope.timeEntry.HRS).toFixed(2));

但我收到以下错误：

[ngModel：numfmt]预期3.50为数字

Answer 1

您可以尝试使用此代码我相信您可以做到。

var app = angular.module('app',[]);

app.controller('Ctrl', function($scope) {      
  $scope.value = 2.55;
});


app.directive('floatValue', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers = [];
      ngModel.$formatters = [];
    }
  };
});

<!DOCTYPE html>
<html ng-app="app">

  <head>

    <title>AngularJS Plunker</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  </head>

  <body ng-controller="Ctrl">   
    <p>      
      <input type="number" ng-model="value" float-value  />{{value}}
    </p>

  </body>
</html>

输入类型编号控制 - 显示数字值正确到2位小数

1 个答案: