Question

我的模型中有一个int数组，用于表示用户使用选择列表选择的选项列表的索引。这个想法是你可以扩展的列表，你可以从选择列表中继续选择。我有这些代码：

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

Answer 1

第一个问题（＆＃34; ng-model没有正确绑定＆＃34;）是因为您没有使用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中可以有多个重复项（点击＆＃34;添加＆＃34;两次，你只是添加了两个空值）。 Angular需要一些方法来区分它们，所以你需要添加一个跟踪属性，在这种情况下是$ index。

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

在Angularjs中维护一组表示选项索引的int

1 个答案: