Angular 将项目添加到 ng-repeat 数组

Question

我在将项目动态添加到用作 ng-repeat 模型的数组时遇到问题。

笨蛋来了：http://plnkr.co/edit/W4b34EDR8dP7ems7aFRV?p=preview

我有一个 table 行的列表。在每一行中有一个 select 框，其内容对于每一行都是相同的。 select 的 ng-model 只是充当第一个 ng-repeat 中的项目的字符串（比只看 plunker 更难解释！）

我的问题是当我点击按钮添加一行时。请按照以下步骤操作：

单击 "Add Phase"。将出现一个包含空白值的新行
Select 新行中的内容
再次单击"Add Phase"。

添加了新行，但 selection 从第 3 行清除。为什么会发生这种情况，我该如何避免？当然，我已经尝试 google，但是很难找到 google 上的单词。

这是一些代码：

    <tr ng-repeat="phase in phases track by $index">
        <td>{{$index + 1}}</td>
        <td><select ng-model='phase'>
              <option ng-repeat="item in availablePhases" ng-value="item">{{item}}</option>
            </select>
        </td>
    </tr>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.phases = ['Phase 1', 'Phase 2'];
  $scope.availablePhases = ['Phase 0', 'Phase 1', 'Phase 2', 'Phase 3'];

  $scope.add = function() {
    $scope.phases.push('');
  }
});

谢谢！

Answer 1

您为所有值提供了相同的值 model，因此当您更新一个值时，您就更新了所有值。我不确定为什么它没有改变前两个。要让它工作，只需更改

<select ng-model='phase'>

到

<select ng-model='phases[$index]'>

Angular 将项目添加到 ng-repeat 数组

Angular adding item to ng-repeat array

angularjs

ng-repeat

angularjs-ng-repeat