Question

我有以下应用程序使用角度js，我正在使用它来学习它。我有一个行表，我想动态地向表中添加新行。当我单击添加按钮时，会创建一个新行，由于某些原因，位置不正确。也许这一行的内部计数器搞砸了，但我不知道这是怎么发生的，为什么会发生这种情况......？

重新制作的步骤：

点击第一个＆＃39;添加＆＃39;按钮 - 注意它下面的新行。
点击第二个＆＃39;添加＆＃39;按钮 - 注意它下面的新行。
点击第三个＆＃39;添加＆＃39;按钮 - 注意位置不符合预期（？）

我有一个可用的傻瓜

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);  
};

任何帮助都非常感激？

谢谢，

如果您反向点击“添加”，则为p.s。按钮，即你点击第三个，第二个然后第一个＆＃39;添加＆＃39;按钮按预期工作 - 无法理解为什么这会产生影响 - 我可以猜测它是光标问题，但不确定原因..

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

Answer 1

我认为您使用的splice()功能错误了。如果我理解你的问题（我不确定），你需要找到当前行的位置，点击的位置，并根据该位置插入新行。

以下是我对它的看法：https://plnkr.co/edit/xq90WZNNlQJ5GFJRXEJb?p=preview - 它仍然会遇到以下问题，即稍后点击会插入重复日期，例如。点击＆＃34;星期四＆＃34;将插入另一个＆＃34;星期三＆＃34;。但定位是坚实的。

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

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

Answer 2

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

at 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：plunker

使用AngularJs动态创建表行

2 个答案: