Fonctions mathématiques dans les liaisons AngularJS

Existe-t-il un moyen d'utiliser les fonctions mathématiques dans les liaisons AngularJS?

par exemple

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

Ce violon montre le problème

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

Vous devez injecter Mathdans votre portée, si vous avez besoin de l'utiliser car vous $scopene savez rien des mathématiques.

Le moyen le plus simple, vous pouvez le faire

$scope.Math = window.Math;

dans votre contrôleur. Une manière angulaire de le faire correctement serait de créer un service Math, je suppose.

Alors que la réponse acceptée est juste que vous pouvez injecter Mathpour l'utiliser en angulaire, pour ce problème particulier, la manière la plus conventionnelle / angulaire est le filtre numérique:

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

Vous pouvez en savoir plus sur le numberfiltre ici: http://docs.angularjs.org/api/ng/filter/number

Je pense que la meilleure façon de le faire est de créer un filtre, comme ceci:

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

alors le balisage ressemble à ceci:

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

Violon mis à jour: http://jsfiddle.net/BB4T4/

C'est une question velue à laquelle répondre, car vous n'avez pas donné le contexte complet de ce que vous faites. La réponse acceptée fonctionnera, mais dans certains cas, entraînera de mauvaises performances. Ça, et ça va être plus difficile à tester.

Si vous faites cela dans le cadre d'une forme statique, très bien. La réponse acceptée fonctionnera, même si elle n'est pas facile à tester et qu'elle est hinky.

Si vous voulez être "angulaire" à ce sujet:

Vous voudrez garder toute "logique métier" (c'est-à-dire la logique qui modifie les données à afficher) hors de vos vues. Cela vous permet de tester votre logique à l'unité et de ne pas coupler étroitement votre contrôleur et votre vue. Théoriquement, vous devriez pouvoir pointer votre contrôleur vers une autre vue et utiliser les mêmes valeurs des étendues. (si ça a du sens).

Vous voudrez également considérer que tout appel de fonction à l'intérieur d'une liaison (comme {{}}ou ng-bindou ng-bind-html) devra être évalué à chaque résumé , car angular n'a aucun moyen de savoir si la valeur a changé ou non comme avec une propriété sur la portée.

La manière "angulaire" de procéder serait de mettre en cache la valeur d'une propriété sur la portée lors du changement en utilisant un événement ng-change ou même un $ watch.

Par exemple avec un formulaire statique:

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>

Et maintenant, vous pouvez le tester!

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

Pourquoi ne pas envelopper tout l'objet mathématique dans un filtre?

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


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

        return 0;
    }
}

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

et utiliser:

{{number_var | math: 'ceil'}}

La meilleure option consiste à utiliser:

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

Il définit la valeur par défaut de l'équation à 0 dans le cas où les valeurs ne sont pas initialisées.

Si vous cherchez à faire un simple tour en angulaire, vous pouvez facilement définir le filtre à l'intérieur de votre expression. Par exemple:

{{ val | number:0 }}

Voir cet exemple CodePen & pour d'autres options de filtre numérique.

Documents angulaires sur l'utilisation des filtres numériques

La façon la plus simple de faire des calculs simples avec Angular est directement dans le balisage HTML pour les liaisons individuelles selon les besoins, en supposant que vous n'avez pas besoin de faire des calculs de masse sur votre page. Voici un exemple:

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

Dans ce cas, il vous suffit de faire le calcul dans le () puis d'utiliser un filtre | pour obtenir une réponse numérique. Voici plus d'informations sur la mise en forme des nombres angulaires sous forme de texte:

https://docs.angularjs.org/api/ng/filter

Soit liez l'objet Math global sur la portée (n'oubliez pas d'utiliser $ window not window)

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

Utilisez la liaison dans votre HTML:

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

Ou créez un filtre pour la fonction mathématique spécifique que vous recherchez:

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

Utilisez le filtre dans votre HTML:

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

Cela ne ressemble pas à une façon très angulaire de le faire. Je ne sais pas exactement pourquoi cela ne fonctionne pas, mais vous auriez probablement besoin d'accéder à la portée afin d'utiliser une fonction comme celle-ci.

Ma suggestion serait de créer un filtre. C'est la voie angulaire.

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

Ensuite, dans votre code HTML, procédez comme suit:

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

Le numberfiltre formate le nombre avec des milliers de séparateurs, ce n'est donc pas strictement une fonction mathématique.

De plus, son «limiteur» décimal n'a pas ceilde décimales hachées (comme certaines autres réponses le laisseraient croire), mais plutôt roundles.

Donc, pour n'importe quelle fonction mathématique que vous voulez, vous pouvez l'injecter (plus facile à simuler que d'injecter tout l'objet Math) comme ceci:

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

Pas besoin non plus de l'envelopper dans une autre fonction.

Il s'agit plus ou moins d'un résumé de trois réponses (par Sara Inés Calderón, klaxon et Gothburz), mais comme elles ont toutes ajouté quelque chose d'important, je considère qu'il vaut la peine de rejoindre les solutions et d'ajouter quelques explications.

Compte tenu de votre exemple, vous pouvez effectuer des calculs dans votre modèle en utilisant:

{{ 100 * (count/total) }}

Cependant, cela peut entraîner un grand nombre de décimales, donc l' utilisation de filtres est une bonne façon de procéder:

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

Par défaut, le filtre numérique laisse jusqu'à trois chiffres fractionnaires , c'est là que l' argument fractionSize est assez pratique ( {{ 100 * (count/total) | number:fractionSize }}), ce qui dans votre cas serait:

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

Cela arrondira également déjà le résultat:

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>

Dernière chose à mentionner, si vous comptez sur une source de données externe, il est probablement judicieux de fournir une valeur de secours appropriée (sinon vous pouvez voir NaN ou rien sur votre site):

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

Sidenote: En fonction de vos spécifications, vous pouvez même être plus précis avec vos solutions de secours / définir des solutions de secours à des niveaux inférieurs déjà (par exemple {{(100 * (count || 10)/ (total || 100) | number:2)}}). Cependant, cela peut ne pas toujours avoir de sens ..

Exemple de typographie angulaire utilisant un tuyau.

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

Ajouter aux déclarations @NgModule

@NgModule({
  declarations: [
    MathPipe,

puis utilisez dans votre modèle comme ceci:

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