在 Angularjs 中维护一个表示期权索引的整数数组

Question

我的模型中有一个整数数组，旨在表示用户将使用选择列表从中选择的选项列表的索引。 这个想法是有一个可以扩展的列表，并且您不断从选择列表中选择内容。 我有以下代码：

    <ul>
      <li ng-repeat="item in model.arrayOfInts">
        <select ng-model="item"
                ng-options="choice.id as choice.name for choice in common.options">
          <option value="">---</option>
        </select>
        <button ng-click="model.arrayOfInts.splice($index, 1)" type="button">
          Delete
        </button>
      </li>
    </ul>
    <button ng-click="model.arrayOfInts.push(null)" type="button">
      Add
    </button>

我有两个问题似乎相关：

• ng-model似乎实际上并没有正确绑定;如果我检查范围，我可以看到新推送的arrayOfInt成员仍然设置为null，即使我从代表它们的选择菜单中选择了一些东西。

• 当我尝试将另一个项目推送到数组中时，Angular 抱怨不允许重复选项。

做我想做的事情的正确方法是什么？

JSFiddle 示例

Answer 1

第一个问题（"ng-model 未正确绑定"）是因为您没有使用 ng-model 定位数组。 ng-repeat中的item是作用域上的一个新属性（由ng-repeat创建）。它不包含任何关于它来自哪里的信息（arrayOfInts）。

下面的代码告诉 ng-model 指向数组的正确索引，而不是新的 scope 属性。

<select ng-model="model.arrayOfInts[$index]"
            ng-options="choice.id as choice.name for choice in common.options">

第二个问题是因为 model.arrayOfInts 中可以有多个重复项（单击"添加"两次，您刚刚添加了两个空值）。Angular 需要某种方法来区分它们之间的区别，因此您需要添加一个跟踪属性，在本例中$index。

<li ng-repeat="item in model.arrayOfInts track by $index">