Question

HTML

<div ng-app="app" ng-controller="Example">
  <input type="number" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

的Javascript

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = $scope.data[propertyName].toFixed(2);
    };
  });

我试着只保留两位小数。

我看到两个问题，第一个问题是视图中的数字没有改变，尽管mainOdd1确实发生了变化。第二个是我在控制台中收到有关使用toFixed函数的错误。

我在这里做错了什么？

由于

Answer 1

你好toFixed错误发生，因为在转换为.FIxed时它将成为String但你的输入类型为数字所以它不会接受所以你必须改为浮动

 $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = parseFloat($scope.data[propertyName].toFixed(2));
    };

Answer 2

您的输入是type =“number”。您必须使用此

$scope.data = {
  'mainOdd1' : 0,
};

并且可以使用step = 0.01进行输入，以便只有两位小数

Answer 3

问题在于这一行

$scope.data[propertyName].toFixed(2)

使用Unary plus将其转换为数字

$scope.data[propertyName] = +$scope.data[propertyName].toFixed(2);

Answer 4

运行代码段以解决您的两个问题：

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      $scope.data[propertyName] = parseFloat($scope.data[propertyName]).toFixed(2);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example">
  <input type="text" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

从控制器到输入字段的角度绑定

4 个答案: