使變量名稱動態基於輸入？

Question

我正在嘗試做多列（最終基於用戶選擇），其中每一列將其結果獨立於其余部分而隨機分配。 這意味着我不確定是否會有多少列，並且我希望能夠根據需要重復該功能。 我知道有一種方法可以在PHP中執行此操作（類似於$ var {$ i}，iirc），但是我該怎么做呢？

html看起來像這樣：

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

在我的控制器中，現在，我必須為每個控制器做一個，這就是為什么要有rollDice1，rollDice2等的原因。每個控制器都像這樣：

$scope.rollDice1 = function () {
  $scope.animal1 = animalRand();
  $scope.color1 = colorRand();
  $scope.size1 = sizeRand();
  $scope.age1 = randFloor(15, 1);
}; 

所以有一個rollDice2，它給了我animal2，color2等，然后是rollDice3，依此類推。 我只想擁有一個，然后根據輸入的值更改變量名，但是我不知道如何使它起作用。 當前版本是：

$scope.rollDice = function (val) {
   $scope.animal[val] = animalRand();
   $scope.color[val] = colorRand();
   $scope.size[val] = sizeRand();
   $scope.age[val] = randFloor(15, 1);
};

我嘗試了其他一些操作，例如$ scope.animal.val，甚至$ scope.animal {val}，但這些操作只會給我帶來錯誤。 有沒有辦法做到這一點，還是我堅持為每個函數創建一個單獨的函數並限制用戶的選擇呢？

Plnkr在這里： http ://plnkr.co/edit/J0mYup?p=preview

提前致謝！

Answer 1

您需要使用根據值構建的字符串鍵使用數組訪問器表示法。 您的rollDice函數應如下所示：

$scope.rollDice = function (val) {
   $scope["animal" + val] = animalRand();
   $scope["color" + val] = colorRand();
   $scope["size" + val] = sizeRand();
   $scope["age" + val] = randFloor(15, 1);
};

然后，您可以從模板代碼中使用rollDice(1) ， rollDice(2)等調用它。

---

如果您有很多這些，則將數據存儲在數組中可能更有意義。 您可以在范圍上創建一個數組，如下所示：

$scope.data = [];

然后，您的rollDice函數將如下所示：

$scope.rollDice = function (val) {
   $scope.data[val] = {
       animal: animalRand(),
       color: colorRand(),
       size: sizeRand(),
       age: randFloor(15, 1),
   };
};

您仍將以相同的方式調用rollDice ，但隨后將使用另一種方法來從HTML模板訪問范圍數據。

<tr>
    <td>{{data[1].animal}}</td>
    <td>{{data[2].animal}}</td>
    <td>{{data[3].animal}}</td>
</tr>

這具有使用諸如ngRepeat東西進行自動化的額外優勢。 例如，該代碼可以簡化為：

<tr>
    <td ng-repeat="item in data">{{item.animal}}</td>
</tr>