如何使用同一组 ng-options 添加多个选择元素答案

【问题标题】：How to add more than one select element with same set of ng-options如何使用同一组 ng-options 添加多个选择元素
【发布时间】：2014-09-02 09:44:26
【问题描述】：

这个问题可能非常琐碎，但它让我发疯。我的页面上可以有 n 个动态添加的元素。所有这些都将具有相同的一组选项。

<select class="form-control action"
      data-ng-options="action.name for action in statementData" 
      data-ng-model="selectedRules.statementOptions"
>

这是此类元素之一的标记。

问题：当我在一个选择元素中更改或选择某些内容时，其他所有内容都会更新。我不想要那个。这可能发生在同一个模型对象上。但是如果我删除模型，那么就没有数据了。

【问题讨论】：

标签： javascript angularjs ng-options angular-ngmodel

【解决方案1】：

如果您只是复制变量，它通过引用传递并更改为一个将更改另一个。

尝试使用 angular.copy() 创建两个变量并将其用于两个选择选项。

试试下面的方法：

<!-- First select -->
<select class="form-control action"
  data-ng-options="action.name for action in statementData" 
  data-ng-model="selectedRules.statementOptions">

<!-- Second select -->
<select class="form-control action"
  data-ng-options="action.name for action in statementData1" 
  data-ng-model="selectedRules.statementOptions">

在 Controller 中你必须这样做。

$scope.statementData1 = angular.copy(statementData);

通过使用 angular.copy() 为 $scope 中的两个变量制作单独的副本。

【讨论】：

我什至考虑过使用 angular.copy。但是这里的问题是，我可以有数百个这样的选择元素，它们是动态添加的，我不知道其中有多少会出现在页面上。用户可以单击按钮添加这些元素，需要任意次数。
也许我有办法在 select 语句本身中传递一个新模型。那可能行得通。但我无法弄清楚如何。
目前我能想到的一个逻辑 - 在范围内创建一个数组。将初始 statementData 变量推入其中。然后当用户单击按钮创建新选择时...在运行时创建一个新副本，如 statementData1 并将其推送到数组中。所以所有用户选择的值都将在数组中，您可以根据业务需求使用它
实际上我认为我们需要一个用于模型副本而不是数据的数组。我使用了这种方法，制作了一系列模型，看起来效果很好。

【解决方案2】：

将该原始模型复制到其他组件。以 angular.copy() 为例。

【讨论】：

我什至考虑过使用 angular.copy。但是这里的问题是，我可以有数百个这样的选择元素，它们是动态添加的，我不知道其中有多少会出现在页面上。用户可以单击按钮添加这些元素，需要任意次数。