代码之家 › 专栏 › 技术社区 › cpick

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

angularjs-ng-repeat html-table angularjs

cpick · 技术社区 · 7 年前

我正在尝试删除表中的行,但我不希望它永远都是空的。。。表以一行开始,但用户可以添加新行,也可以删除所有行,从而使表变为空。这是我在控制器中添加和删除行的代码:

$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>

在此方面的任何和所有帮助都将不胜感激!!

2 回复 | 直到 7 年前

31piy 7 年前

您可以在拼接数组之前检查其长度,还可以选择向用户显示警报,警告用户表中至少应存在一行。

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

Krzysztof Raciniewski Eliseo 7 年前

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

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

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

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

推荐文章

Yeenkash · 我的angular ng repeat div在浏览器中添加了注释[关闭]

7 年前

mBo · Angularjs svg图形ng在范围内重复

7 年前

Harish Kumar · angular js:单击products list build内数量增加和减少按钮的事件,ng repeat反映每个列表数量编号

7 年前

Juan I. Morales Pestana · 错误:[$注入器:unpr]rangeFilterProvider中出错

7 年前

ASP.net and angularjs · 无法从代码中看到使用AngularJS动态创建的文本框的值

7 年前

amacdonald · 如果长度>0时正确显示,但长度==0时不显示,则为ng

7 年前

user9130953 · ng repeat下拉列表,以限制多次选择相同的值

7 年前

Ro_nair · 具有Angular JS和MySql的表显示重复的中继器键

7 年前

Celia · ng模型的Angularjs动态名称

7 年前

Güney SaramalÄ± · 如果动态加载页面,则Ng repeat不起作用

7 年前