AngularJS绑定中的数学函数

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

如。

<p>The percentage is {{Math.round(100*count/total)}}%</p>

这把小提琴说明了这个问题

http://jsfiddle.net/ricick/jtA99/1/

当前回答

我认为最好的方法是创建一个过滤器，就像这样:

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

然后标记看起来像这样:

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

更新小提琴:http://jsfiddle.net/BB4T4/

2014-06-04 06:41:41

其他回答

我认为最好的方法是创建一个过滤器，就像这样:

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

然后标记看起来像这样:

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

更新小提琴:http://jsfiddle.net/BB4T4/

2014-06-04 06:41:41

这是一个棘手的问题，因为你没有给出你正在做的事情的完整背景。接受的答案是可行的，但在某些情况下会导致较差的性能。这一点，而且它将更难测试。

如果你把它作为静态表单的一部分，没问题。公认的答案是有效的，即使它不容易测试，而且它很古怪。

如果你想成为“Angular”:

你需要将任何“业务逻辑”(即改变要显示的数据的逻辑)排除在视图之外。这样你就可以对你的逻辑进行单元测试，这样你就不会把控制器和视图紧密耦合起来。理论上，您应该能够将控制器指向另一个视图，并使用作用域中的相同值。(如果有道理的话)。

你还需要考虑绑定内部的任何函数调用(比如{{}}或ng-bind或ng-bind-html)都必须在每个摘要上求值，因为angular无法知道值是否发生了变化，或者是否像作用域上的属性那样。

“angular”的方法是在变化时使用ng-change事件或甚至$watch将值缓存到作用域的属性中。

例如，对于静态表单:

angular.controller('MainCtrl', function($scope, $window) {
   $scope.count = 0;
   $scope.total = 1;

   $scope.updatePercentage = function () {
      $scope.percentage = $window.Math.round((100 * $scope.count) / $scope.total);
   };
});

<form name="calcForm">
   <label>Count <input name="count" ng-model="count" 
                  ng-change="updatePercentage()"
                  type="number" min="0" required/></label><br/>
   <label>Total <input name="total" ng-model="total"
                  ng-change="updatePercentage()"
                  type="number" min="1" required/></label><br/>
   <hr/>
   Percentage: {{percentage}}
</form>

现在您可以测试它了!

describe('Testing percentage controller', function() {
  var $scope = null;
  var ctrl = null;

  //you need to indicate your module in a test
  beforeEach(module('plunker'));

  beforeEach(inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();

    ctrl = $controller('MainCtrl', {
      $scope: $scope
    });
  }));

  it('should calculate percentages properly', function() {
    $scope.count = 1;
    $scope.total = 1;
    $scope.updatePercentage();
    expect($scope.percentage).toEqual(100);

    $scope.count = 1;
    $scope.total = 2;
    $scope.updatePercentage();
    expect($scope.percentage).toEqual(50);

    $scope.count = 497;
    $scope.total = 10000;
    $scope.updatePercentage();
    expect($scope.percentage).toEqual(5); //4.97% rounded up.

    $scope.count = 231;
    $scope.total = 10000;
    $scope.updatePercentage();
    expect($scope.percentage).toEqual(2); //2.31% rounded down.
  });
});

2013-04-26 17:52:13

使用管道的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'}}

2018-02-17 11:31:31

这或多或少是三个答案的总结(来自Sara Inés Calderón, klaxon和Gothburz)，但由于他们都添加了一些重要的东西，我认为值得加入解决方案并添加更多的解释。

考虑到你的例子，你可以在你的模板中使用:

{{ 100 * (count/total) }}

然而，这可能会导致大量的小数点，所以使用过滤器是一个很好的方法:

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

默认情况下，数字过滤器将留下最多三个小数位数，这就是fractionSize参数非常方便的地方 ({{100 * (count/total) | number:fractionSize}})，这在你的情况下将是:

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

This will also round the result already: angular.module('numberFilterExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.val = 1234.56789; } ]); <!doctype html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app="numberFilterExample"> <table ng-controller="ExampleController"> <tr> <td>No formatting:</td> <td> <span>{{ val }}</span> </td> </tr> <tr> <td>3 Decimal places:</td> <td> <span>{{ val | number }}</span> (default) </td> </tr> <tr> <td>2 Decimal places:</td> <td><span>{{ val | number:2 }}</span></td> </tr> <tr> <td>No fractions: </td> <td><span>{{ val | number:0 }}</span> (rounded)</td> </tr> </table> </body> </html>

最后要提到的是，如果你依赖于外部数据源，提供一个合适的回退值可能是一个很好的实践(否则你可能在你的网站上看到NaN或什么都没有):

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

旁注:根据您的规格，您甚至可以更精确地使用回退/已经在较低级别上定义回退(例如{{(100 * (count || 10)/ (total || 100) | number:2)}})。然而，这可能并不总是有意义的。

2016-12-09 15:06:16

将全局Math对象绑定到作用域(记住使用$window而不是window)

$scope.abs = $window.Math.abs;

在你的HTML中使用绑定:

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

或者为特定的Math函数创建一个过滤器:

module.filter('abs', ['$window', function($window) {
  return function(n) {
    return $window.Math.abs($window.parseInt(n));
  };
});

在你的HTML中使用过滤器:

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

2015-08-12 14:48:35

AngularJS绑定中的数学函数

推荐文章

最新文章

标签