动态添加/删除表中的行

Question

我想在引导模式中实现一个表格，用于在 angularJS 中添加/删除动态行。这里是img中的例子：

很快，我想在最后一个按钮上添加很多行，但删除另一个后面的。如何在角度做？现在我这样做：
HTML

<table>
<tbody>
    <tr ng-repeat="row in rows">
        <td ng-bind-html="row.SocietyBorrower" angular-compile="nRows">&emsp;</td>
        <td><label class="fs-label">{{fsFactory.getLabel(labels, pageName, 'Form_Label_NDGSocieta')}}</label></td>
        <td>&emsp;&emsp;&emsp;</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 添加/删除按钮。正确的？显然，在开始时，第一行必须为空，并且只能使用添加按钮。 怎么做？非常感谢！

Answer 1

根据了解，我在 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>

Answer 2

我会做一个计数器，从 0 开始。

每次用户点击一个按钮时，您都会将该计数器加 1。

鉴于他点击了 10 次，您应该有 11 行显示给他。

然后，您可以使用ng-repeat 编写一堆代码一行。

然后将重复 10 次，得到 11 行。

如果他点击删除按钮，要么你将计数器减 1，要么你可以使用一个数组来获取索引，然后删除点击的行。

够清楚吗？还是我应该改写？

Answer 3

您的主要问题是您正在 ng-repeat 中进行所有检查和努力工作。

当有一些东西必须操纵 ng-repeat 时，我总是把它放在外面，例如，当只剩下一行时，你会显示 ADD 按钮，这有点倒退。

我在主要的 ng-repeat tr 之前或之后再做一行，并添加一个ng-if="!rows.length"。这样一来，该行只有在所有行都被删除后才会出现。

演示：http://jsfiddle.net/Lvc0u55v/12388/