AngularJS指令/用于显示分数的过滤器
AngularJS directive/filter for displaying fractions
我正试图创建一个指令和过滤器,以从输入类型数字中获取数字输入,并在模糊显示时将其显示为小数(如果适用),然后在焦点显示时将它显示为小数。该模型需要以十进制形式存储。
如果字段是文本字段,则我当前的代码有效,因为模型是分数,但如果我将其更改为数字字段,则不允许进行模型更新,因为字符串不是数字。我还没有解决模糊/聚焦问题,但这应该比这一步问题小。
如有任何帮助,我们将不胜感激!
到目前为止,我的代码如下:
.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(显示/小数)之间存在分隔,则更容易解决。
我在这里尝试了一下。
相关文章:
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- Regex有助于突出显示html中匹配文本的角度过滤器
- 角度ng重复显示应用过滤器之前的数据
- 我可以配置默认的角度过滤器以显示字符串,以便以搜索词开头的字符串排在第一位
- 显示Aurelia值转换器上的所有过滤器
- jQuery过滤器有时显示所有元素
- 显示骨干js过滤器
- 如何通过过滤器显示特定值
- AngularJS日期过滤器显示错误的日期
- 完整的日历+过滤器显示的数据可能
- Angular.js日期过滤器显示提前一个月
- Jquery过滤器显示不稳定的结果
- 使用过滤器显示基于类别的项目
- 淘汰赛中的过滤器显示空的选择列表
- jQuery基于过滤器显示/隐藏行
- 在angular中,如何对使用过滤器显示的字段使用orderBy和ngRepeat,从而改变它们的实际内容
- 使用Angularjs中的日期过滤器显示休息日的日期
- 如何缩短网址以仅使用角度.js过滤器显示域
- 角度日期过滤器显示未定义/ NaN,即使使用ng-cloak