angularjs格式字段基于焦点[重复]

Question

这个问题在这里已有答案：

• AngularJS: in a input how to show '$50,000.00' when no focused but show '50000' when focused？ 5个答案

在angularjs中，根据输入是否具有焦点来格式化输入字段值的正确方法是什么？

我有一个显示数字的输入，我想显示四舍五入到两位小数的值，但是当用户去编辑该字段时，也会希望显示完整值并可以编辑。

即

a - 我有一个存储值为1200.0166667的模型

b - 当绑定的输入字段没有焦点时，我想显示1200.017

c - 但是当输入有焦点时，我想显示完整值1200.0166667

这样做的正确方法是什么？

Answer 1

Check this demo code

你可以使用ng-focus和ng-blur来实现它

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.num = 1200.017;

  $scope.onFocus = function(){
    $scope.num = 1200.0166667;
  }

  $scope.onBlur = function(){
    $scope.num = 1200.017;
  }
});

在js文件中：

<input ng-focus="onFocus()" ng-model="num" ng-blur="onBlur()"/>

这是一个非常粗略的例子。你可以得到这个想法并相应地提出必要的逻辑。

Answer 2

在为这个问题做了一些代码后，我已经提出了这个指令

var myApp = angular.module('myApp', []);
 
myApp.controller('MyCtrl', function($scope) {
  $scope.numberVal = 200.0 / 3.0;
});

myApp.directive('myNumber', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModelCtrl) {
            
            $element.bind('blur', function (e) {
                ngModelCtrl.$render();
            });
            
            $element.bind('focus', function(e) {
            		ngModelCtrl.$render();
            });
            
            ngModelCtrl.$render = function() {
                if ($element.is(":focus"))
                	$element.val(ngModelCtrl.$viewValue);
                else {
                	var val = ngModelCtrl.$viewValue;
                  if (isNaN(val)) $element.val(val);
                  else $element.val(Math.round(val * 100) / 100);
                }
            }
        }
        
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-App="myApp" ng-controller="MyCtrl">
    <div>Raw Value: {{numberVal}}</div>
    <input type='text' my-number ng-model="numberVal"/>
</div>