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

我试图创建一个指令和过滤器，从输入类型的数字中获取一个数字输入，然后在模糊上显示为分数（如果适用），然后在焦点上显示为小数。模型需要存储为十进制

如果字段是文本字段，因为模型是分数，那么我当前的代码可以工作，但是如果我将其更改为数字字段，那么它将不允许模型更新，因为字符串不是数字。我还没有制定出关于模糊/聚焦的方案，但这应该比这一步更重要

任何帮助都将不胜感激

我的代码如下：

.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;
                }
            }
        }
    });

.directive（'fractionView'，['$filter'，函数（$filter）{
返回{
要求：'ngModel'，
链接：函数（范围、元素、属性、模型控制）{
modelCtrl.$parsers.push（函数（inputValue）{
var transformedInput=$filter（'fraction'）（inputValue）；
if（transformedInput！=inputValue&&transformedInput）{
modelCtrl.$setViewValue（transformedInput）；
modelCtrl.$render（）；
}
返回转换输入；
});
}
};
}])
.filter（'分数'，函数（）{
返回函数（输入）{
函数HCF（u，v）{
var U=U，V=V；
while（true）{
如果（！（U%=V））
返回V；
如果（！（V%=U））
返回U；
}
}
返回分数（输入）；
//将小数转换成小数
函数分数（十进制）{
如果（！十进制）{
十进制=这个；
}
整=字符串（十进制）。拆分（'.'）[0]；
decimal=parseFloat（“.”+字符串（十进制）.split（'.'）[1]）；
num=“1”；
对于（z=0；z<字符串（十进制）。长度-2；z++）{
num+=“0”；
}
十进制=十进制*num；
num=parseInt（num）；
对于（z=2；z

我认为，如果我们在聚焦和模糊方面考虑所需的功能，问题更容易概念化：

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

虽然可以使用单个

ngModel

和

$parsers

通过从小数转换为小数或从小数转换为小数来实现这一点，但我认为，如果公开的

ngModel

（小数值）和显示的ngModel（显示/小数值）之间存在分隔，则更容易解决

---

我试了一下。

这看起来几乎正是我所希望的，我在更改时遇到的唯一问题是，我想使用指令作为属性，在指令中绑定元素上的焦点和模糊事件，并从中交换视图/模型值。这是我的叉子