如何在单击“添加”按钮时添加一行按钮
How to add a row on click of a "Add" button in angularJS
我想在单击" add "按钮时在表中添加一行。我试图使用"ng-show"指令来实现这一点,但即使没有单击"添加"按钮,该行也会显示。请帮我一下。下面是代码-
home.html -
<table class="table">
<thead>
<tr>
<th>SNo.</th>
<th>UserId</th>
<th>Name</th>
<th>Share</th>
<th>Paid</th>
</tr>
</thead>
<tbody ng-repeat="member in members">
<tr>
<td>{{member.sNo}}</td>
<td>{{member.id}}</td>
<td>{{member.name}}</td>
<td>{{member.share}}</td>
<td>{{member.paid}}</td>
</tr>
<tr ng-show="show" class="ng-hide"> //the row which is to be added
<td><span>{{counter}}</span></td>
<td><input type="text" required ng-model="new.id"></td>
<td><input type="text" required ng-model="new.name"></td>
<td><input type="text" required ng-model="new.share"></td>
<td><input type="text" required ng-model="new.paid"></td>
</tr>
</tbody>
</table>
<div><input type="button" value="Add" ng-click="addMember()"/></div>
controller.js -
expmodule.controller('expenseForm', function($scope, sharedProperties) {
var id, expenses = {};
$scope.show = false;
$scope.members = [{
sNo: "1",
id: "abc@gmail.com",
name: "Neha",
share: 200,
paid: 400,
}, {
sNo: "2",
id: "xyz@gmail.com",
name: "Sneha",
share: 200,
paid: 400,
}];
$scope.counter = $scope.members.length++;
$scope.addMember = function () {
$scope.show = true;
return $scope.newRow = true;
}
});
你在找这样的东西吗?http://plnkr.co/edit/jxXX5sWhgmYrANV7ieKM?p=preview
问题中提供的代码中很少有不正确的地方。
- 添加行在ng-repeat中。因此,将为每个成员添加新的添加行。
- 同样,由于show变量在ng-repeat中,它将是parent作用域的子变量,并且根据当前逻辑始终为false。
-
$scope.counter = $scope.members.length++
这将使数组长度增加1,并且数组中的新对象将未定义。我猜你想在新添加行中显示计数器。可以这样简单地完成—在add行中添加{{members.length + 1}}
,而不是为此创建一个新的作用域变量。此外,当添加新成员时,它将始终具有最新的值。 - addMember函数中的return语句有一个赋值操作。
看起来运行良好(参见下面的演示)。
<子>当然,您应该将ng-repeat="member in members"
放置到<tr>
而不是<tbody>
(除非您想要有多个tbody)。 子>
<子>您应该将$scope.counter = $scope.members.length++;
更改为$scope.counter = $scope.members.length + 1;
子>
这个<<p>看到,strong>短演示。
相关文章:
- 在HTML5画布上添加按钮和控件
- 无法在图像周围添加按钮
- Sitecore富文本编辑器-添加按钮
- 如何在标记href中添加按钮
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何在视频标签中添加按钮覆盖
- 添加按钮以切换浏览器
- 如何在php中添加按钮而不是错误状态和成功消息
- Struts2jquery可编辑网格,要禁用内联添加按钮
- 如何在服务器端的文本中添加按钮单击事件
- 简单的dart网页应用程序在IE上添加按钮的速度非常慢
- 向HTML页面添加按钮,更新表格信息
- (PHP&JavaScript)a href添加按钮赢得'我不适用于Mozilla,但适用于IE和谷歌
- 单击添加按钮后如何显示答案按钮
- 如何在 extjs 5 中的工具提示中添加按钮
- 在数据表的新行中添加按钮,变得未定义
- 如何向照片滑动添加按钮
- 动态添加按钮后刷新 jQm 标头
- PHP,MySql和JQuery - 按添加按钮后填充选择框
- 动态添加按钮,这些按钮也会动态添加文本框 AngularJS