각도의 산술 함수JS 바인딩

각도의 산술 함수JS 바인딩

Angular에서 산술 함수를 사용하는 방법이 있습니까?JS 바인딩?

예.

<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/

대답하기 어려운 질문입니다.왜냐하면 당신은 당신이 하고 있는 일의 전체 맥락을 설명하지 않았기 때문입니다.승인된 답변은 작동하지만 경우에 따라 성능이 저하될 수 있습니다.그건 그렇고, 테스트하기가 더 어려울 거야

정적인 형태로 이 작업을 수행할 경우 좋습니다.테스트하는 것이 쉽지 않고, 힌키하더라도, 받아들여진 답은 효과가 있을 것입니다.

이것에 대해 「각적」이 되고 싶은 경우:

「비즈니스 로직」(표시하는 데이터를 변경하는 로직)은, 일절 뷰에 넣지 말아 주세요.이는 로직을 유닛으로 테스트할 수 있기 때문에 컨트롤러와 뷰가 밀접하게 결합되지 않습니다.이론적으로는 컨트롤러를 다른 뷰로 포인트하여 스코프의 동일한 값을 사용할 수 있어야 합니다.(그게 말이 된다면)

( 「」등)가 호출되는 할 필요가 .{{}} ★★★★★★★★★★★★★★★★★」ng-bind ★★★★★★★★★★★★★★★★★」ng-bind-htmlangular는 스코프의 속성을 사용하여 값이 변경되었는지 여부를 알 수 없기 때문에 모든 다이제스트에 대해 평가해야 합니다.

이를 위한 "각선" 방법은 ng-change 이벤트 또는 $watch를 사용하여 변경 시 스코프의 속성에 값을 캐시하는 것입니다.

예를 들어 static 형식의 경우:

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

수학 obj 전체를 필터로 감싸는 게 어때?

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 | 산술: '수치'}}

다음 옵션을 사용하는 것이 좋습니다.

{{(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>

그건 앵귤러 방식이 아닌 것 같은데요.왜 동작하지 않는지는 모르겠지만, 그러한 기능을 사용하려면 스코프에 액세스 할 필요가 있을 것입니다.

필터를 만드는 것이 좋습니다.그게 앵귤러 방식이야.

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

다음으로 HTML에서 다음을 수행합니다.

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

number필터는 숫자를 수천 개의 구분자로 포맷하기 때문에 엄밀하게는 산술 함수가 아닙니다.

소수점인 는 '하다', '한계'가 없다.ceil잘린 소수점(다른 답변이 당신을 믿게 할 수 있는 것처럼)은round먹어버리죠.

따라서 원하는 함수를 다음과 같이 주입할 수 있습니다(전체 Math 객체를 주입하는 것보다 시뮬레이션이 더 쉽습니다).

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

다른 기능으로 포장할 필요도 없습니다.

이것은 (Sara Inés Calderon, Klaxon 및 Gothburz에 의한) 3개의 답변의 대략적인 요약입니다만, 모두 중요한 것을 추가했기 때문에, 솔루션에 참가해 설명할 가치가 있다고 생각합니다.

예를 들어 템플릿에서 다음 명령을 사용하여 계산을 수행할 수 있습니다.

{{ 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)}}). 단, 항상 이치에 맞는 것은 아닙니다.

파이프를 사용한 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'}}

언급URL : https://stackoverflow.com/questions/12740329/math-functions-in-angularjs-bindings