Angular JS - 从表中删除行的问题

Posted 2023-03-05

【中文标题】Angular JS - 从表中删除行的问题

【英文标题】：Angular JS - Problem deleting row from table

【发布时间】：2022-01-20 06:46:20

【问题描述】：

#AngularJS 我有一张桌子。当我单击任何行上的 DELETE 按钮时，以下代码始终会删除第一个。我哪里错了？我会发布部分代码

            <tr id="riga" ng-repeat='x in cars'>
                <td class="dimensione">x.id</td>
                <td class="dimensione">x.targaauto</td>
                <td class="dimensione">x.datiintestatario</td>
                <td class="dimensione">x.marca</td>
                
                
                <td><button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra">                 elimina</button></td>
            </tr>
                <div class="modal fade " id="finestra">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Attenzione</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <h5 class="modal-body">Sei sicuro di voler eliminare questo record?</h5>
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click='rimuovi($index)' data-bs-                           dismiss="modal">OK</button>
                            <button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">ANNULLA</button>
                            </div>
                        </div>
                    </div>
                </div>
          </table>
        </tbody>
      <script src="bootstrap.js"></script>
    </body>
</html>

函数 RIMUOVI

$scope.rimuovi=function($index)
    $scope.cars.splice($index, 1)

【问题讨论】：

$index 仅在 ng-repeat 块内已知。您的窗口在该块之外，因此传递给 rimuovi 函数的 $index 总是不正确的。

【参考方案1】：

当你按下

<button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra">                 elimina</button>

按钮，需要添加

ng-click="verifyDelete($index)"

你将保存在你的指令/控制器中。这样，当您从模态框询问“您确定”时，您就有了正确的行。

将 ng-click='rimuovi($index)' 更新为 ng-click='rimuovi()' 并使用从 verifyDelete 保存的值

【讨论】：

已解决。还是谢谢大家

【参考方案2】：

问题是您试图访问 ng-repeat 块之外的 $index 变量。要解决此问题，您应该在单击删除然后显示模式时将其存储到控制器中的变量中。

或者您可以传递对象，然后对数组进行过滤，但两个选项要求您将值存储到变量中。