Question

在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>

基于焦点的angularjs格式字段

2 个答案: