使用 AngularJs 动态创建表行

Question

我有以下使用 Angular js 的应用程序，我正在使用它来学习它。我有一个行表，我想动态地将新行添加到表中。当我单击添加按钮时，会创建一个新行，由于某种原因，有时位置不正确。也许该行的内部计数器被搞砸了，但我看不出这是如何发生的，或者为什么会发生......？

重建步骤：

1. 单击第一个“添加”按钮 - 请注意它正下方的新行。
2. 单击第二个“添加”按钮 - 请注意它正下方的新行。
3. 单击第三个“添加”按钮 - 注意位置与预期不符（？）

我这里有一个 plunker

https://plnkr.co/edit/WA2K8TNuEE6blNB6zBvZ?p=preview

谁能明白为什么会这样？创建新行的代码如下所示

行创建代码

$scope.addRow = function(row) {
    var guid = new Date().getMilliseconds();
    var rowDate = row.date;

    var rowToAdd = {
        id: guid, 
        date: new Date(rowDate.getFullYear(), rowDate.getMonth(), rowDate.getUTCDay())
    };

     $scope.rows.splice(row.id, 0, rowToAdd);  
};

任何帮助非常感谢？

谢谢，

Ps 如果您反向单击“添加”按钮，即单击第三个、第二个然后是第一个“添加”按钮，它会按预期工作 - 不明白为什么会有所不同 - 我猜这是光标问题但不知道为什么..

p.p.s guid 是为了解决在 ng-repeat 中有重复键限制的角度问题

Answer 1

我认为您使用的 splice() 函数有误。如果我了解您的问题（我不确定是否了解），您需要找到当前行的位置，即被点击的行，并根据该位置插入新行。

这是我的看法：https://plnkr.co/edit/xq90WZNNlQJ5GFJRXEJb?p=preview - 它仍然存在点击稍后一天会插入重复日期的问题，例如。单击“星期四”将插入另一个“星期三”。但是定位很扎实。

var index = $scope.rows.indexOf(row);

$scope.rows.splice(index, 0, rowToAdd);  

Answer 2

尝试使用 $index 来定义插入点：

在 html:

<button class="btn btn-success" ng-click="addRow(r, $index)">add</button>

在 js:

$scope.addRow = function(row, idx) {
    ...
    $scope.rows.splice(idx, 0, rowToAdd);  

见小偷：plunker