我想在 Bootstrap 模式中实现一个表,用于在 angularJS 中添加/删除动态行。这是 img 中的示例:
简短地说,我想在最后一个按钮上添加很多行,但删除另一个按钮。 Angular 如何做?现在我这样做:
HTML
<table>
<tbody>
<tr ng-repeat="row in rows">
<td ng-bind-html="row.SocietyBorrower" angular-compile="nRows"> </td>
<td><label class="fs-label">{{fsFactory.getLabel(labels, pageName, 'Form_Label_NDGSocieta')}}</label></td>
<td>   </td>
<td ng-bind-html="row.NDGSociety" angular-compile="nRows"></td>
<td ng-show="row.LastRow">
<a href="#" ng-click="addNewRow()" class="fs-form-plus-minus"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td ng-hide="row.LastRow">
<a href="#" ng-click="deleteRow($index)" class="fs-form-plus-minus"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
</tr>
<tr><td></td></tr>
</tbody>
AngularJS
$scope.rows = [{
"SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"),
"NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />"),
"LastRow": false
}];
$scope.nRows = $scope.rows.length;
$scope.addNewRow = function () {
$scope.rows.push({
"SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"),
"NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />"),
"LastRow": true
});
$scope.nRows++;
};
$scope.deleteRow = function (index) {
if ($scope.nRows < 1) {
$scope.rows.splice(index, 1);
$scope.rows.push({
"SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"),
"NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />")
});
} else {
$scope.rows.splice(index, 1);
$scope.nRows = $scope.rows.length;
}
};
有什么建议吗?我尝试在最后一行 ng-hide/ng-show 添加/删除按钮。正确的?显然,一开始,第一行必须为空,并且只有添加按钮。 怎么做?非常感谢!
最佳答案
据了解,我在 jsfiddle 上为您创建了简单的演示,请找到它并让我知道您需要的任何其他内容。
http://jsfiddle.net/Lvc0u55v/12390/
还附上代码。
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function ($scope) {
$scope.rows = [{"Name" : "Chandra Prakash Variyani"}];
$scope.addRow = function () {
var obj = { "Name": $scope.Name };
$scope.rows.push(obj)
}
$scope.deleteRow = function (index) {
$scope.rows.splice(index, 1);
}
});
HTML
<div class="info-box" id="lkj" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-2"><input type="text" ng-model="Name" /></div>
<div class="col-lg-2"><input type="button" value="Add" ng-click="addRow()" /></div>
</div>
<br />
<hr />
<table>
<tbody>
<tr ng-repeat="row in rows">
<td ng-bind="$index+1"> </td>
<td ng-bind="row.Name"> </td>
<td> <input type="button" value="delete" ng-click="deleteRow(row.Name)" /> </td>
</tr>
<tr></tr>
</tbody>
</table>
关于javascript - 动态添加/删除表中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40739547/