Add/Delete rows in table dynamically

Question

I would like to implement in a bootstrap modal a table for add/remove dinamically rows in angularJS. Here the example in img:

Shortly, I would like to add a lot of rows on the last button, but delete the other back. How to do in angular? For now I do this:
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;
    }
};

Any suggest? I try to ng-hide/ng-show the add/delete button by if last row. Correct? Obviously, at start, a 1st row must empty and only with add button. How to do? Thanks a lot!

Please do some search, you ll get a lot of articles. here is one shanidkv.com/blog/angularjs-dynamic-table-addremove-action — Naghaveer R
– Naghaveer R, Commented Nov 22, 2016 at 10:44

Chandra Prakash Variyani · Accepted Answer · 2016-11-22 10:57:22Z

According to the understanding i have created simple demo for you on jsfiddle, please find that and let me know anything else you required.

http://jsfiddle.net/Lvc0u55v/12390/

Also attaching code as well.

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>

user4676340 · Accepted Answer · 2016-11-22 10:38:58Z

0

What I would do is make a counter, starting from 0.

Each time the user clicks on a button, you add 1 to that counter.

Given that he clicked 10 times, you should have 11 rows to display to him.

Then, you can use a ng-repeat to write a bunch of code for a single line.

It will then be repeated 10 times, to give 11 rows.

if he clicks on the delete button, either you substract 1 to the counter, or you can use an Array to get the index, and delete the clicked line.

Is it clear enough ? Or should I rephrase ?

answered Nov 22, 2016 at 10:38

user4676340

Comments

Shannon Hochkins · Accepted Answer · 2016-11-22 10:53:25Z

0

Your main issue is that you're doing all your checks and hard work inside the ng-repeat.

When there's something that has to manipulate the ng-repeat, I always put it outside, for example, you're showing the ADD button when there's only one row left, this is a bit backwards.

I make another row, before or after the main ng-repeat tr, and add an ng-if="!rows.length". This way, this row will only appear if all rows have been deleted.

DEMO: http://jsfiddle.net/Lvc0u55v/12388/

answered Nov 22, 2016 at 10:53

Shannon Hochkins

12.3k15 gold badges70 silver badges101 bronze badges

Collectives™ on Stack Overflow

Add/Delete rows in table dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related