javascript - 在 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 似乎实际上并没有正确绑定(bind)；如果我检查范围，我可以看到 arrayOfInt 新推送的成员仍然设置为 null 即使我从代表它们的选择菜单中选择了一些内容。

• 当我尝试将另一个项目插入数组时，Angular 提示不允许重复选项。

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

JSFiddle sample

Answer 1

第一个问题(“ng-model 未正确绑定(bind)”)是因为您没有使用 ng-model 来定位数组。 ng-repeat 中的 item 是作用域上的一个新属性(由 ng-repeat 创建)。它不包含任何有关其来源的信息 (arrayOfInts)。

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

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