zoukankan      html  css  js  c++  java
  • angular限制输入框整数和小数的指令

    (function () {
        'use strict';
        angular.module('common')
            .directive('numFormat', function () {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    scope: {
                        isInt: '@',
                        decimal: '@',
                    },
                    controller: ['$scope', function ($scope) {
                    }],
                    link: function (scope, $element, $attr, ngModelCtrl) {
                        function format() {
                            if (ngModelCtrl.$modelValue === null) {
                                ngModelCtrl.$setViewValue(null);
                                ngModelCtrl.$render();
                            } else if ( isNaN(ngModelCtrl.$modelValue) || ngModelCtrl.$modelValue === undefined) {
                                ngModelCtrl.$setViewValue(null);
                                $element.val(null);
                                ngModelCtrl.$render();
                            } else {
                                if (scope.isInt === 'true') {
                                    var f = Math.round(ngModelCtrl.$modelValue * 100) / 100;
                                    var s = f.toString();
                                    ngModelCtrl.$setViewValue(parseInt(s));
                                    ngModelCtrl.$render();
                                } else if (scope.decimal) {
                                    // 保留任意位小数
                                    var s = ngModelCtrl.$modelValue.toString();
                                    // var s = viewValue.length > modelValue.length ? viewValue:modelValue;
                                    var rs = s.split('.');
                                    if (rs.length > 1) {
                                        if (rs[1].length > parseInt(scope.decimal)) {
                                            rs[1] = rs[1].slice(0, scope.decimal)
                                            ngModelCtrl.$setViewValue(parseFloat(rs.join('.')));
                                        }
    
                                        var viewValue = ngModelCtrl.$viewValue.toString();
                                        viewValue = viewValue.split('.')
                                        if (viewValue[1].length > parseInt(scope.decimal)) {
                                            viewValue[1] = viewValue[1].slice(0, scope.decimal)
                                            ngModelCtrl.$setViewValue(parseFloat(viewValue.join('.')));
                                        }
                                    }
                                    ngModelCtrl.$render();
                                } else {
                                    // 最多保留两位小数
                                    var f = Math.round(ngModelCtrl.$modelValue * 100) / 100;
                                    console.log('numform:',f)
                                    var s = f.toString();
                                    var rs = s.indexOf('.');
                                    if (rs >= 0) {
                                        console.log('numform1:',s)
                                        ngModelCtrl.$setViewValue(parseFloat(s));
                                        ngModelCtrl.$render();
                                    } else {
                                        // ngModelCtrl.$setViewValue(parseInt(s));
                                    }
                                }
                            }
                        }
    
                        $element.keyup(format)
                    }
                }
            })
    })();

    使用:

                    <input min="0"  step="0.01" type="number" num-format class="form-control"  ng-model="money">
  • 相关阅读:
    IDEA SpringBoot项目连接数据库报Acess denied错误解决方法
    字符流中出现的第一个字符
    数组中重复的数字
    替换空格
    数组中次数超过一半的数字
    表示数值的字符串
    正则表达式匹配
    SpringMVC中的视图和视图解析器
    IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
    spring中注解注入 context:component-scan 的使用说明
  • 原文地址:https://www.cnblogs.com/kaibo520/p/10410518.html
Copyright © 2011-2022 走看看