Angular 双花括号内的函数调用 [英] function call inside Angular double curly braces

查看:27
本文介绍了Angular 双花括号内的函数调用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我在 Kendo UI 中的热图代码.

<div ng-repeat="h in row.hours" ng-style="h.styleStr"数据值="{{params.compare ? h.percentChange : h.current[unit]}}"数据时间="{{$index}}">{{params.compare ?h.percentChange : h.current[单位]}}

它工作得很好.div 中的 h.current[unit] 所做的是,它显示值(以十进制表示法).像这样..
但是我需要将十进制值显示为整数.像这样...我有一个 intFormat 函数可以做到这一点.例如:intFormat(79.952) 将返回 80.所以我正在尝试使用 intFormat 函数格式化热图中的数字.如何实现这一目标?我不知道这是否合法,但我试过 {{params.compare ?h.percentChange : intFormat(h.current[unit])}},但它不起作用.我正在使用 Angularjs 1X 和 KendoUI.我可以在双花括号内使用函数吗?

解决方案

当然可以:

创建一个这样的函数

$scope.getDisplayValue = function(currentValue){返回 intFormat(currentValue);}

然后在html中像这样引用它:

{{getDisplayValue(h.percentChange)}}

如果您有任何问题,请告诉我.

This is my code bit of a heat-map in Kendo UI.

<div ng-repeat="h in row.hours" ng-style="h.styleStr" 
    data-value="{{params.compare ? h.percentChange : h.current[unit]}}" 
    data-time="{{$index}}">
        {{params.compare ? h.percentChange : h.current[unit]}}
</div>

Its works perfectly fine. what the h.current[unit] inside the div, does is, it displays the value (in decimal notation). Like this..
However I need to display the decimal values as integers. Like this... And I have a intFormat function that does just that. For eg: intFormat(79.952) will return 80. So i'm trying to format the numbers inside the heatmap using the intFormat function. How to achieve this? I don't know if this is legal but I tried {{params.compare ? h.percentChange : intFormat(h.current[unit])}}, but its not working. I'm using Angularjs 1X and KendoUI. Can I use function inside the double curly brace?

解决方案

Sure you can:

create a function like this

$scope.getDisplayValue = function(currentValue)
{
   return intFormat(currentValue);
}

And then reference it like this in the html:

{{getDisplayValue(h.percentChange)}}

Please let me know if you have any questions.

这篇关于Angular 双花括号内的函数调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆