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

Making variable name dynamic based on input?

本文关键字：动态化 变量名 输入      更新时间：2023-09-26

我正在尝试做多列（最终基于用户选择），其中每列独立于其余列随机化其结果。这意味着我不确定会有多少列，我希望能够根据需要重复该函数。我知道有一种方法可以在PHP中做到这一点（类似于$var{$i}，iirc），但是我如何在angular中做到这一点？

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

提前感谢！

您需要使用数组访问器表示法，使用从值构建的字符串键。您的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>
相关文章：