Fonctions mathématiques dans les liaisons angulaires

Question

Est-il possible d’utiliser des fonctions mathématiques dans les liaisons angulaires ?

par exemple

Ce violon montre le problème

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

Answer 1

Il faut injecter à votre portée, si vous avez besoin de l’utiliser comme ne savent rien de Math.

Manière la plus simple, vous pouvez faire

dans votre contrôleur. Angulaire moyen de faire cela correctement serait de créer un service de Math, je suppose.

Answer 2

Alors que la réponse acceptée est juste que vous pouvez injecter `` Utilisez-le dans angulaire, pour ce problème particulier, le moyen le plus classique/angulaire est le filtre du numéro :

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

Answer 3

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

``

ensuite le balisage ressemble à ceci :

``

Mise à jour de violon : http://jsfiddle.net/BB4T4/

Answer 4

C'est un poilu de répondre, parce que vous ne donnez pas le contexte de ce que vous faites. La accepté de répondre à fonctionner, mais dans certains cas, de la cause de la mauvaise performance. Que, et ça va être plus difficile à tester.

Si vous êtes en train de faire cela dans le cadre d'une forme statique, très bien. La accepté de répondre fonctionne, même si ce n'est pas facile à tester, et c'est hinky.

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

Vous aurez envie de garder de toute "logique d'entreprise" (c'est à dire une logique qui modifie l'affichage de données) de votre point de vue. C'est de sorte que vous pouvez unité de tester votre logique, et donc vous ne finirez pas étroitement couplage de votre contrôleur et la vue. En théorie, vous devriez être en mesure de pointer votre contrôleur à un autre point de vue et d'utiliser les mêmes valeurs de la portée. (si cela fait sens).

Vous voudrez aussi de considérer que tous les appels de fonction à l'intérieur d'une liaison (comme {{}} ou ng-bind ou ng-bind-html) devra être évaluée sur chaque digérer, car angulaire a aucun moyen de savoir si la valeur a changé ou pas comme il l'aurait fait avec une propriété sur la portée.

Le "angulaire" façon de le faire serait de mettre en cache la valeur d'une propriété sur la portée du changement à l'aide d'un ng-événement de changement 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.
  });
});