AngularJS - Limit Inkrementieren und Dekrementieren

Question

Ich habe zwei Tasten, eine für Inkrement und andere zum Dekrementieren meines Bereichs.

Ich möchte: min. Anzahl = 0 und max. Nummer = 50.

Ich habe versuchen Sie dies:

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

    } 

}) 

Aber kann ich Wert wie -40 oder 95, ich glaube, mein "Wenn" und "Else" ignoriert werden.

Haben Sie eine Idee?

Danke für die Antwort. :)

Answer 1

Ich müsste Ihren vollen Controller sehen, um das volle Bild zu bekommen. Aber ich glaube, das Problem besteht darin, dass Ihre Ausdrücke einmal beim Start statt in Echtzeit ausgewertet werden.

Meine Lösung wäre, Ihre if-else-Anweisung durch diese zu ersetzen.

$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; 
} 

Auf diese Weise Ihr Zustand jedes Mal, wenn Sie $ scope.previousPrice rufen ausgewertet werden() oder $ scope.nextPrice() anstelle dieser Methoden nur zur Laufzeit zugewiesen werden.

Answer 2

Ich werde Sie empfehlen diese Lösung zu erkunden:

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

Diese Lösung Objekt und Kontext verwendet (dieses) Preis zu handhaben. Vermeiden Sie auch in Zukunft mehrere Funktionen mit demselben Namen innerhalb von Bedingungen, das ist sehr schlechte Praxis.

Und um es für Ihre Winkel App, nur kleine Änderung, statt Variable verwendet Umfang funktioniert.

$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);