AngularJS - 한도 증가 및 감소

Question

두 개의 버튼이 있습니다. 하나는 증분이고 다른 하나는 내 범위 감소입니다.

내가 원하는 항목 : 최소 number = 0 및 Max. 수 = 50

나는이 시도했습니다 :

myApp.controller('StepCtrl', function($scope, $timeout, $state, $stateParams) { 


    $scope.event = { 
     priceid: 0, 
    } 

    if ($scope.event.priceid === 0) { 

    console.log("This is 0") 

    $scope.nextPrice = function() { 
     $scope.event.priceid += 5; 
    } 

    $scope.previousPrice = function() { 
     $scope.event.priceid = 0; 
    }  

    } else if ($scope.event.priceid === 50) { 

    console.log("This is 50") 

    $scope.nextPrice = function() { 
     $scope.event.priceid = 50; 
    } 

    $scope.previousPrice = function() { 
     $scope.event.priceid -= 5; 
    } 

    } else { 

    console.log("This is into 0 and 50") 

    $scope.nextPrice = function() { 
     $scope.event.priceid += 5; 
    } 

    $scope.previousPrice = function() { 
     $scope.event.priceid -= 5; 
    } 

    } 

}) 

을하지만, -40 또는 95와 같은 값을 가질 수 있습니다, 내 "가"와 "그렇지"이 무시됩니다 생각합니다.

아이디어가 있으십니까?

답장을 보내 주셔서 감사합니다. :)

Answer 1

전체 사진을 보려면 전체 컨트롤러를 확인해야합니다. 그러나 문제는 귀하의 표현이 실시간으로가 아니라 시작시 한 번 평가된다는 것입니다.

내 솔루션은 if-else 문을이 것으로 대체하는 것입니다.

$scope.event = { 
    priceid: 0, 
} 

$scope.nextPrice = function() { 
    if($scope.event.priceid < 50) 
    $scope.event.priceid += 5; 
} 

$scope.previousPrice = function() { 
    if($scope.event.priceid > 0) 
    $scope.event.priceid -= 5; 
} 

당신의 상태가 당신이 $ scope.previousPrice() 또는 $ scope.nextPrice() 대신 런타임시에 할당되는 그 방법을 호출 할 때마다 평가됩니다 이런 식으로.

Answer 2

나는이 솔루션을 탐구하는 당신을 추천 해드립니다 :

var event = { 
 
    priceid: 0, 
 
    priceIterator: 45, 
 
    nextPrice: function() { 
 
    if ((this.priceid + this.priceIterator) <= 50) { 
 
     this.priceid += this.priceIterator; 
 
    } 
 
    }, 
 
    previousPrice: function() { 
 
    if ((this.priceid - this.priceIterator) > 0) { 
 
     this.priceid -= this.priceIterator; 
 
    } 
 
    } 
 
}; 
 

 
event.nextPrice(); // 45 
 
event.nextPrice(); // still 45 
 
event.previousPrice(); //0 
 
event.previousPrice(); //still 0 
 
alert(event.priceid);

이 솔루션은 가격을 처리하는 객체와 컨텍스트 (이)를 사용합니다. 또한 미래에 조건 내에서 같은 이름을 가진 여러 함수를 만드는 것을 피하십시오. 이것은 매우 나쁜 습관입니다.

그리고 그것은, 가변하는 대신, 당신의 각 앱 단지 작은 변화를 작동 범위를 사용할 수 있도록 :.

$scope.event = { 
    priceid: 0, 
    priceIterator: 45, 
    nextPrice: function() { 
    if ((this.priceid + this.priceIterator) <= 50) { 
     this.priceid += this.priceIterator; 
    } 
    }, 
    previousPrice: function() { 
    if ((this.priceid - this.priceIterator) > 0) { 
     this.priceid -= this.priceIterator; 
    } 
    } 
}; 
$scope.event.nextPrice(); 
$scope.event.previousPrice(); 
$scope.event.previousPrice(); 
alert($scope.event.priceid);