AngularJS指令/用于显示分数的过滤器

AngularJS directive/filter for displaying fractions

本文关键字:过滤器 显示 指令 用于 AngularJS      更新时间:2023-09-26

我正试图创建一个指令和过滤器,以从输入类型数字中获取数字输入,并在模糊显示时将其显示为小数(如果适用),然后在焦点显示时将它显示为小数。该模型需要以十进制形式存储。

如果字段是文本字段,则我当前的代码有效,因为模型是分数,但如果我将其更改为数字字段,则不允许进行模型更新,因为字符串不是数字。我还没有解决模糊/聚焦问题,但这应该比这一步问题小。

如有任何帮助,我们将不胜感激!

到目前为止,我的代码如下:

.directive('fractionView', ['$filter', function($filter) {
            return {
                require: 'ngModel',
                link: function(scope, element, attrs, modelCtrl) {
                    modelCtrl.$parsers.push(function(inputValue) {
                        var transformedInput = $filter('fraction')(inputValue);
                        if (transformedInput != inputValue && transformedInput) {
                            modelCtrl.$setViewValue(transformedInput);
                            modelCtrl.$render();
                        }
                        return transformedInput;
                    });
                }
            };
        }])
    .filter('fraction', function() {
        return function(input) {
            function HCF(u, v) {
                var U = u, V = v;
                while (true) {
                    if (!(U %= V))
                        return V;
                    if (!(V %= U))
                        return U;
                }
            }
            return fraction(input);
            //convert a decimal into a fraction
            function fraction(decimal) {
                if (!decimal) {
                    decimal = this;
                }
                whole = String(decimal).split('.')[0];
                decimal = parseFloat("." + String(decimal).split('.')[1]);
                num = "1";
                for (z = 0; z < String(decimal).length - 2; z++) {
                    num += "0";
                }
                decimal = decimal * num;
                num = parseInt(num);
                for (z = 2; z < decimal + 1; z++) {
                    if (decimal % z == 0 && num % z == 0) {
                        decimal = decimal / z;
                        num = num / z;
                        z = 2;
                    }
                }
                //if format of fraction is xx/xxx
                if (decimal.toString().length == 2 &&
                        num.toString().length == 3) {
                    //reduce by removing trailing 0's
                    decimal = Math.round(Math.round(decimal) / 10);
                    num = Math.round(Math.round(num) / 10);
                }
                //if format of fraction is xx/xx
                else if (decimal.toString().length == 2 &&
                        num.toString().length == 2) {
                    decimal = Math.round(decimal / 10);
                    num = Math.round(num / 10);
                }
                //get highest common factor to simplify
                var t = HCF(decimal, num);
                //return the fraction after simplifying it
                if (isNaN((decimal / t)) || isNaN(t)) {
                    return;
                } else {
                    return ((whole == 0) ? "" : whole + " ") + decimal / t + "/" + num / t;
                }
            }
        }
    });

我相信,如果我们在聚焦和模糊上查看所需的功能,这个问题更容易概念化:

  • 焦点:显示十进制值
  • 模糊:保存十进制值,然后计算并显示分数表示

尽管可以使用单个ngModel$parsers通过从十进制转换为小数(反之亦然)来实现这一点,但我认为,如果在暴露的ngModel(十进制值)和显示的ngModel(显示/小数)之间存在分隔,则更容易解决。

我在这里尝试了一下。