My goal is to create multiple columns with randomized results independently of each other, based on user selection. I am not sure how many columns there will be, and I want the function to be repeatable as needed. While I know how to achieve this in PHP (using something like $var{$i}), I am unsure about how to do it in Angular.
This is how the HTML looks:
<tr>
<td><button ng-click="rollDice1(1)">rand 1</button></td>
<td><button ng-click="rollDice2(2)">rand 2</button></td>
<td><button ng-click="rollDice3(3)">rand 3</button></td>
</tr>
<tr>
<td>{{animal1}}</td>
<td>{{animal2}}</td>
<td>{{animal3}}</td>
</tr>In my controller, I currently have separate functions for each column (e.g., rollDice1, rollDice2) which result in repetitive code. Each function generates random values for different variables. What I would like is to have a single function where the variable name changes based on input, but I haven't been able to make it work. Here's what I've tried:
$scope.rollDice = function (val) {
$scope.animal[val] = animalRand();
$scope.color[val] = colorRand();
$scope.size[val] = sizeRand();
$scope.age[val] = randFloor(15, 1);
};
I attempted variations like $scope.animal.val and even $scope.animal{val}, but these resulted in errors. Is there a way to achieve what I'm looking for, or do I have to stick with creating separate functions for each column?
You can check out the Plnkr here: http://plnkr.co/edit/J0mYup?p=preview
Thank you for your help!