AngularJS绑定中的数学函数

有没有办法在AngularJS绑定中使用数学函数

e、 g

百分比为{{Math.round（100*计数/总数）}}%

这把小提琴说明了问题所在

---

如果您需要将数学作为一种工具使用，则必须将数学注入您的作用域中

$scope

对数学一无所知

最简单的方法，你可以做到

$scope.Math = window.Math;

在你的控制器里。

---

角度正确的方法是创建一个数学服务，我想。

虽然公认的答案是正确的，但您可以在角度中插入

Math

来使用它，对于这个特定的问题，更传统的/角度的方法是数字过滤器：

百分比为{（100*计数/总数）|数字：0}}%

---

你可以在这里阅读更多关于

数字
过滤器的信息：
这是一个很难回答的问题，因为你没有给出你所做事情的完整背景。公认的答案是可行的，但在某些情况下会导致性能不佳。这就更难测试了

如果您是作为静态表单的一部分来执行此操作，则可以。被接受的答案会起作用，即使它不容易测试，而且很可疑

如果你想在这件事上“有棱角”：
您需要将任何“业务逻辑”（即更改要显示的数据的逻辑）排除在视图之外。这样，您就可以对逻辑进行单元测试，从而不会将控制器和视图紧密耦合。理论上，您应该能够将控制器指向另一个视图，并使用范围中的相同值。（如果有道理的话）

您还需要考虑绑定中的任何函数调用（如<代码> {{} } /代码>或<代码> NG绑定< /代码>或<代码> NG绑定HTML<代码> >），必须对每一个摘要进行评估，因为角度无法知道值是否已经改变，就像它在范围内具有属性一样。
执行此操作的“角度”方法是使用ng change事件甚至$watch将值缓存在范围更改时的属性中

例如，对于静态表单：

角度控制器（'MainCtrl'，函数（$scope，$window）{
$scope.count=0；
$scope.total=1；
$scope.updatePercentage=函数（）{
$scope.percentage=$window.Math.round（（100*$scope.count）/$scope.total）；
};
});


计数

总计


百分比：{{Percentage}

现在你可以测试它了！
我认为最好的方法是创建一个过滤器，如下所示：

myModule.filter('ceil', function() {
    return function(input) {
        return Math.ceil(input);
    };
});

然后标记如下所示：

<p>The percentage is {{ (100*count/total) | ceil }}%</p>

百分比为{（100*计数/总数）| ceil}}%


更新的fiddle:
将全局数学对象绑定到作用域上（记住使用$window而不是window）

在HTML中使用绑定：

<p>Distance from zero: {{abs(distance)}}</p>

<p>Distance from zero: {{distance | abs}}</p>

在HTML中使用过滤器：

<p>Distance from zero: {{abs(distance)}}</p>

<p>Distance from zero: {{distance | abs}}</p>

距零的距离：{{Distance}abs}

如果你想在角度上做一个简单的圆，你可以很容易地在表达式中设置过滤器。例如：

{{val | number:0}}

有关其他数字过滤器选项，请参见此示例（&F）

---

更好的选择是使用：

{{(100*score/questionCounter) || 0 | number:0}}

---

在未初始化值的情况下，它会将公式的默认值设置为0。

使用Angular进行简单计算的最简单方法是根据需要直接在HTML标记中为各个绑定进行计算，前提是您不需要在页面上进行大量计算。下面是一个例子：

{{(data.input/data.input2)| number}} 

在这种情况下，您只需在（）中进行数学运算，然后使用过滤器|获得数字答案。以下是有关将角度数格式化为文本的详细信息：

---

为什么不将整个数学对象包装在一个过滤器中

var app = angular.module('fMathFilters',[]);


function math() {
    return function(input,arg) {
        if(input) {
            return Math[arg](input);
        }

        return 0;
    }
}

return app.filter('math',[math]);

以及使用：

---

<{{{损坏〉}/} < P>这或多或少是对三个答案的总结（由莎拉在考尔德，N，KLXON和GOTHBZ），但是当他们都添加了一些重要的东西时，我认为它值得加入解决方案并增加一些解释。 考虑到您的示例，您可以使用以下方法在模板中进行计算：

{{ 100 * (count/total) }}

但是，这可能会导致大量小数位数，因此使用过滤器是一个好方法：

{{ 100 * (count/total) | number }}

默认情况下，数字过滤器将显示，这是fractionSize参数非常方便的地方 （

{{100*（count/total）| number:fractionSize}}

），在您的情况下：

{{ 100 * (count/total) | number:0 }}

这也将使结果更加接近：

angular.module（'numberFilterExample'，[]）
.controller（'ExampleController'，['$scope'，'，
职能（$范围）{
$scope.val=1234.56789；
}
]);

无格式：
{{val}}
小数点后3位：
{{val | number}}（默认）
小数点后2位：
{{val |编号：2}}
无分数：
{{val |编号：0}}（四舍五入）
这看起来不是一种很有棱角的方式。我不完全确定它为什么不工作，但您可能需要访问范围才能使用这样的函数

我的建议是创建一个过滤器。这就是角度的方式

myModule.filter('ceil', function() {
    return function(input) {
        return Math.ceil(input);
    };
});

然后在HTML中执行以下操作：

<p>The percentage is {{ (100*count/total) | ceil }}%</p>

百分比为{（100*计数/总数）| ceil}}%

数字过滤器使用数千个分隔符对数字进行格式化，因此它不是严格意义上的数学函数

此外，它的小数“限制器”并没有切碎的小数（正如一些其他答案会让你相信的那样），而是将它们四舍五入

因此，对于您想要的任何数学函数，您都可以将其注入（比注入整个数学对象更容易模拟），如下所示：

也不需要将其包装到另一个函数中。
使用管道的Angular Typescript示例

math.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'math',
})

export class MathPipe implements PipeTransform {

  transform(value: number, args: any = null):any {
      if(value) {
        return Math[args](value);
      }
      return 0;
  }
}

添加到@NgModule声明

@NgModule({
  declarations: [
    MathPipe,

然后在模板中使用如下内容：

{{(100*count/total) | math:'round'}}

谢谢我有一个用例，其中我有多个具有完全不同逻辑和功能的模板
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'math',
})

export class MathPipe implements PipeTransform {

  transform(value: number, args: any = null):any {
      if(value) {
        return Math[args](value);
      }
      return 0;
  }
}

@NgModule({
  declarations: [
    MathPipe,

{{(100*count/total) | math:'round'}}