Here is the code snippet I created:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="app.css" rel="stylesheet" type="text/css"/>
<title>TNF FANTASY</title>
</head>
<body>
<div class="app" ng-app="myApp" ng-controller="myCtrl">
<div class="total">
<i><h4>Money Remaining: <br>{{total |currency}}</h4></i> <h4>{{playersSelected}}</h4>
</div>
<ul>
<li class="players" ng-repeat="player in players">
{{player.name}} <br>
{{player.Team}} <br>
{{player.price| currency}} <br>
{{player.position| uppercase }}
<br>
<button ng-click="buy($index)">buy</button>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.playersSelected = "0/6";
$scope.total = 50000000;
// keep track of what was bought already
$scope.history = [];
$scope.denteries = [];
$scope.players = [
{name : "Yasin 'YB' Amusan", Team : "Industry", price: 8000000, position: 'forward', image: src='http://res.cloudinary.com/deji/image/upload/v1489787662/blank_photo_mqvivv.png'}...
$scope.buy = function(i) {
var p = $scope.history.indexOf(i);
if (p !== -1) {
$scope.history.splice(p, 1);
$scope.total += $scope.players[i].price;
$scope.playersSelected = $scope.history.length + "/6";
} else {
if ($scope.total < $scope.players[i].price) {
return;
}
$scope.history.push(i);
$scope.total -= $scope.players[i].price;
$scope.playersSelected = $scope.history.length + "/6";
}
};
});
</script>
</body>
</html>
I have a requirement where users can only buy specific positions: two "defenders" or "hybrids", two "midfielders" or "hybrids" and two "forwards" or "hybrids". This should total 6 players to buy.
I've attempted to use AngularJS' indexOf method but it's not giving the desired results. Is there a way to implement this functionality within AngularJS or is it too complex?