AngularJS 바인딩의 수학 함수

AngularJS 바인딩에서 수학 함수를 사용하는 방법이 있습니까?

예 :

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

이 바이올린은 문제를 보여줍니다

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

수학에 대해 전혀 모르는 Math상태로 사용해야 할 경우 스코프 에 주입 해야합니다 $scope.

가장 간단한 방법은 할 수 있습니다

$scope.Math = window.Math;

컨트롤러에서. 이 작업을 올바르게 수행하는 방법은 수학 서비스를 만드는 것입니다.

Math이 특정 문제에 대해 각도로 사용하도록 주입 할 수있는 대답은 옳지 만 더 일반적인 / 각도 방법은 숫자 필터입니다.

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

number필터 에 대한 자세한 내용은 여기를 참조 하십시오. http://docs.angularjs.org/api/ng/filter/number

가장 좋은 방법은 다음과 같이 필터를 만드는 것입니다.

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

마크 업은 다음과 같습니다.

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

업데이트 된 바이올린 : http://jsfiddle.net/BB4T4/

이것은 당신이하고있는 일에 대한 완전한 맥락을 제공하지 않았기 때문에 대답하기에 털이 많은 것입니다. 허용 된 답변은 작동하지만 경우에 따라 성능이 저하 될 수 있습니다. 그리고 테스트하기가 더 어려워 질 것입니다.

정적 양식의 일부로이 작업을 수행하는 경우 좋습니다. 수락하기 쉬운 답변은 테스트하기 쉽지 않더라도 잘 작동합니다.

이것에 대해 "Angular"가 되려면 :

뷰에서 "비즈니스 로직"(즉, 데이터가 표시되도록 변경하는 로직)을 유지해야합니다. 따라서 로직을 단위로 테스트 할 수 있으므로 컨트롤러와 뷰를 밀접하게 연결하지 않아도됩니다. 이론적으로 컨트롤러를 다른보기로 가리키고 범위에서 동일한 값을 사용할 수 있어야합니다. (그렇다면 말이됩니다).

또한 내부 바인딩 (예 : 모든 함수 호출 것을 고려할 것 {{}}또는 ng-bind또는 ng-bind-html) 평가되어야 할 것이다 모든 다이제스트 각도가 알 수있는 방법이 없기 때문에이 속성에서와 같은 값이 변경되거나하지 않은 경우, 범위에.

이를위한 "각도"방법은 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.
  });
});

왜 전체 수학 객체를 필터로 감싸지 않겠습니까?

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


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

        return 0;
    }
}

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

그리고 사용 :

{{number_var | 수학 : 'ceil'}}

더 나은 옵션은 다음을 사용하는 것입니다.

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

값이 초기화되지 않은 경우 방정식의 기본값을 0으로 설정합니다.

Angular에서 간단한 라운드를 원한다면 식 내부에 필터를 쉽게 설정할 수 있습니다. 예를 들면 다음과 같습니다.

{{ val | number:0 }}

다른 숫자 필터 옵션에 대해서는이 CodePen 예제 및를 참조하십시오 .

숫자 필터 사용에 대한 각도 문서

Angular를 사용하여 간단한 수학을 수행하는 가장 쉬운 방법은 페이지에서 대량 계산을 수행 할 필요가 없다고 가정 할 때 필요에 따라 개별 바인딩에 대한 HTML 마크 업에 직접있는 것입니다. 예를 들면 다음과 같습니다.

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

이 경우 ()에서 수학을 수행 한 다음 필터 | 숫자 답변을 얻을 수 있습니다. 각도 숫자를 텍스트로 형식화하는 방법에 대한 자세한 정보는 다음과 같습니다.

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

전역 Math 객체를 스코프에 바인딩합니다 (창이 아닌 $ window를 사용해야 함).

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

HTML에서 바인딩을 사용하십시오.

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

또는 다음과 같은 특정 수학 함수에 대한 필터를 만드십시오.

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

HTML에서 필터를 사용하십시오.

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

그것은 그렇게하는 매우 Angular 방식처럼 보이지 않습니다. 왜 작동하지 않는지 완전히 알지 못하지만 그러한 기능을 사용하려면 범위에 액세스해야 할 것입니다.

내 제안은 필터를 만드는 것입니다. 이것이 각도 방식입니다.

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

그런 다음 HTML에서 다음을 수행하십시오.

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

number은 엄격하게 수학이 작동하지 그래서 필터는 천 단위 구분와 수를 포맷합니다.

또한 십진수 'limiter'는 ceil잘린 소수 가 아니며 (다른 답변이 당신을 믿게 만들 수 있기 때문에) 오히려 숫자를 씁니다 round.

따라서 원하는 수학 함수에 대해 다음과 같이 주입 할 수 있습니다 (전체 Math 객체를 주입하는 것보다 조롱하는 것이 더 쉽습니다).

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

다른 기능으로 감쌀 필요가 없습니다.

이것은 Sara Inés Calderón, klaxon 및 Gothburz의 세 가지 답변에 대한 요약입니다. 그러나 중요한 내용이 모두 추가되었으므로 솔루션에 참여하고 설명을 추가 할 가치가 있다고 생각합니다.

예제를 고려하면 다음을 사용하여 템플릿에서 계산을 수행 할 수 있습니다.

{{ 100 * (count/total) }}

그러나 이로 인해 소수점 이하 자릿수가 많이 생길 수 있으므로 필터 를 사용하는 것이 좋습니다.

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

기본적으로 숫자 필터는 최대 3 개의 소수 자릿수 를 유지합니다. 여기서 fractionSize 인수 는 매우 편리한 위치 ( {{ 100 * (count/total) | number:fractionSize }})입니다.

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

이것은 또한 이미 결과를 반올림합니다 :

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)}}. 그러나 이것이 항상 의미가있는 것은 아닙니다 ..

파이프를 사용한 각도 타입 스크립트 예제.

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