我想在引导模式中实现一个表,用于在angularJS中添加/删除dinamically行。在这里,在IMG的例子:
动态添加/删除表中的行
不久,我想补充的最后一个按钮很多行,但删除对方回来。如何做角?现在我这样做:
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;
}
};
任何建议?我试着用最后一行来隐藏/显示添加/删除按钮。正确?显然,在开始时,第一行必须为空,并且只能使用添加按钮。 怎么办?非常感谢!
请做一些搜索,你会得到很多的文章。这里是一个http:// www。shanidkv.com/blog/angularjs-dynamic-table-addremove-action –