• 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">
  • 相关阅读:
    数字索引分页
    经典语录 cloud
    日常交际技巧经验总结100句(大全) cloud
    成大事必备9种能力、9种手段、9种心态 cloud
    浅谈服务器虚拟化
    使用mysqlard监控mysql服务器性能
    CentOS服务器iptables配置
    如何编写好的应用程序
    电子杂志新出路
    泸州老窖集团有限责任公司电子化职能化和网络化的管理新模式
  • 原文地址:https://www.cnblogs.com/kaibo520/p/10410518.html
Copyright © 2020-2023  润新知