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>

根据输入使变量名称动态化？

1 个答案: