如何在不允许表为空的情况下删除ng-repeat表行？

Posted 2021-04-09

我试图删除表中的行但我不希望它永远是空的...表以一行开头，但用户可以添加新行但也删除所有行，将表呈现为空。这是我在控制器中添加和删除行的代码：

$scope.rowItems = [{}];

$scope.addRowItems = function() {
    $scope.rowItems.push(rowItem); 
}

$scope.deleteRowItem = function(item) {
    $scope.rowItems.splice(item, 1);
}

这是我的html代码：

<tr ng-repeat:"rowItem in rowItems track by $index">
   ...rest of row here...
</tr>

任何和所有的帮助将非常感谢!!

答案

您可以在拼接之前检查阵列的长度，并可选择向用户显示警告，警告他表中至少应有一行。

$scope.deleteRowItem = function(item) {
  if($scope.rowItems.length > 1) {
    $scope.rowItems.splice(item, 1);
  } else {
    alert("Can't remove the only row");
  }
}

另一答案

您可以在HTML视图中添加静态行，如下所示：

<tr>
   ...static row columns are here...
</tr>
<tr ng-repeat:"rowItem in rowItems track by $index">
   ...rest of row here...
</tr>

这是个好主意，因为您可以在第一个tr中添加操作按钮/输入，只需添加动作事件即可添加新行或其他内容

或者您可以限制删除组件逻辑中的行，如@31piy所示