如何更改在添加Angularjs后删除添加按钮
问题描述:
想要只显示第一行添加按钮, 当我点击添加,添加新行并更改或隐藏添加按钮删除。 不断相同。而第一行不应该删除,并显示添加按钮如何更改在添加Angularjs后删除添加按钮
div ng-app="ReceiptsApp">
<div ng-controller="ReceiptsController">
<table class="tableData">
<tr ng-repeat="r in rvm">
<td>
<select ng-model="c" style="width:150px;height:22px;" ng-options="c.name for c in sample">
<option value="">--Select--</option>
</select>
</td>
<td>
<input type="text" lass="input-large" ng-model="c.Address" name="Address" />
</td>
<td>
<input type="text" class="input-large" ng-model="c.Mobile" name="Mobile" />
</td>
<td>
<button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button>
</td>
<td>
<button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button>
</td>
</tr>
</table>
</div>
</div>
JS
var ReceiptsApp = angular.module('ReceiptsApp', []);
ReceiptsApp.controller('ReceiptsController', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Bhanu',
Address: 'Moosapet',
Mobile: '9246100100'
}, {
id: '2',
name: 'Madhu',
Address: 'Uppal',
Mobile: '9000330653'
}, {
id: '3',
name: 'Geetha',
Address: 'Sanath Nagar',
Mobile: '9912340519'
}];
$scope.rvm = [{}];
$scope.addRow = function (index, c) {
if ($scope.rvm.length == (index + 1)) {
$scope.rvm.push({
});
}
}
$scope.deleteRow = function ($index) {
$scope.rvm.splice($index, 1);
}
});
我已经张贴在这里
答
代码一个廉价的&快速伎俩是使添加按钮仅显示ng-repeat
这样的最后一个元素:
<td ng-if="$last">
<button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button>
</td>
<td ng-if="!$last">
<button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button>
</td>
我也更新了您的JSBin以便在行动中看到它。
谢谢彼得,它的工作完美 –