As a newcomer to Angular, I decided to challenge myself by building a simple app. Currently, my select options only display the keys of a data object. What I really want to achieve is to show a value beneath the second select box for each team, which displays the associated value with the key when the first option is selected, and then adds to that value when the second option is selected. How can I accomplish this in Angular?
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<div ng-show="k == v">{{v}}</div>
The values need to be displayed under the Team 2 boxes.
UPDATE: I found a solution that worked perfectly for me!
$scope.calc = function() {
$scope.calculatedValue = Number($scope.selectedItem1);
if($scope.selectedItem2){
$scope.calculatedValue = Number($scope.selectedItem1) + Number($scope.selectedItem2);
}
}
$scope.calc2 = function() {
$scope.calculatedValue2 = Number($scope.selectedItem3);
if ($scope.selectedItem4) {
$scope.calculatedValue2 = Number($scope.selectedItem3) + Number($scope.selectedItem4);
};
}
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue}} </p>
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue2}} </p>