[angularjs] AngularJS 바인딩의 수학 함수

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

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

이것에 대해 “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]);

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