I am facing a small problem with an ng-model that I have been working on.
First, let me show you the part where the ng-model is functioning correctly:
<input type="text"
ng-model="slip.risk"
ng-change="riskWinCalculations(slip, 'RISKSTRAIGHT')">
<input type="text"
ng-model="slip.win"
ng-change="riskWinCalculations(slip, 'WINSTRAIGHT')">
<strong>To Win: </strong>{{straightTotalWin | currency}}
<strong>Total Stake: </strong>{{straightTotalStake | currency}}
Now, moving on to the HTML section where the ng-model is causing issues for me:
<input type="text"
ng-change="riskWinCalculations(null, 'RISKPARLAY')"
ng-model="riskParlay">
<strong>To Win: </strong>{{winParlay | currency}}
<strong>Total Stake: </strong>{{riskParlay | currency}}
In this controller, there are functions named applyParlayRisk and riskWinCalculations, where the case RISKPARLAY is posing problems. The other cases are functioning perfectly fine.
applyStraightRisk = function(slip) {
var moneyLine = _.result(_.find(slip.lines, {isSelected: '1'}), 'moneyLine');
slip.win = RiskWikCalculations.calculateStraightBet(slip.risk, parseFloat(moneyLine, 10), true);
},
applyStraightWin = function(slip) {
var moneyLine = _.result(_.find(slip.lines, {isSelected: '1'}), 'moneyLine');
slip.risk = RiskWikCalculations.calculateStraightBet(slip.win, parseFloat(moneyLine, 10), false);
},
applyParlayRisk = function(parlay, riskParlay) {
$scope.riskParlay = riskParlay;
console.log($scope.riskParlay);
//this logs UNDEFINED
$scope.winParlay = riskParlay * (parlay.payoutProportion || 4.5);
},
sumStraightStakes = function(betSlip) {
var totalStake = 0,
totalWin = 0;
_.each(betSlip, function(slip) {
if (slip.risk) {
totalStake += parseFloat(slip.risk, 10);
}
if (slip.win) {
totalWin += parseFloat(slip.win, 10);
}
});
$scope.straightTotalStake = totalStake;
$scope.straightTotalWin = totalWin;
};
$scope.riskAll = 0;
$scope.winAll = 0;
$scope.riskWinCalculations = function(slip, type) {
switch (type) {
case 'RISKSTRAIGHT':
applyStraightRisk(slip, slip.risk);
break;
case 'WINSTRAIGHT':
applyStraightWin(slip, slip.win);
break;
case 'RISKPARLAY':
applyParlayRisk($scope.currentParlay, $scope.riskParlay);
break;
}
sumStraightStakes($scope.betSlip);
};
Can you point out where you think the mistake might be in my code?
UPDATE
I have implemented the same functionality in a mobile app, and it is working properly there. Here's a look at how it's done:
HTML:
<button ng-click="openRiskWinKeypad(null, 'RISKPARLAY')">
Risk: {{riskParlay}}
</button>
<strong>Total Stake: </strong>{{riskParlay | currency}}
<strong>To Win: </strong>{{winParlay | currency}}
Controller:
applyParlayRisk = function(parlay, amount) {
$scope.riskParlay = amount;
$scope.winParlay = amount * (parlay.payoutProportion || 4.5);}
There is a slight difference here because I am opening a custom keypad for input.
$scope.openRiskWinKeypad = function(slip, type) {
$scope.keypad = {value: 0};
if (type === 'RISKSTRAIGHT' && slip.risk) {
$scope.keypad.value = slip.risk;
}
if (type === 'WINSTRAIGHT' && slip.win) {
$scope.keypad.value = slip.win;
}
$ionicPopup.show({
// This is where the keypad opens
}).then(function(amount) {
if (amount) {
switch (type) {
case 'RISKSTRAIGHT':
applyStraightRisk(slip, amount);
break;
case 'WINSTRAIGHT':
applyStraightWin(slip, amount);
break;
break;
case 'RISKPARLAY':
applyParlayRisk($scope.currentParlay, amount);
break;
}
}
sumStraightStakes($scope.betSlip);
});
};
EDIT
If I make these changes:
<input type="text" ng-model="riskParlay"
ng-change="riskWinCalculations(null, 'RISKPARLAY')">
and
applyParlayRisk = function(parlay, riskParlay) {
$scope.riskParlay = riskParlay;
console.log($scope.riskParlay);
$scope.winParlay = riskParlay * (parlay.payoutProportion || 4.5);
}
and
case 'RISKPARLAY':
applyParlayRisk($scope.currentParlay, riskParlay);
console.log($scope.currentParlay.name);
break;
All I receive is:
ReferenceError: riskParlay is not defined