Add/remove input boxes to the table row in Angular dynamically

Question

Somehow I can't get my head around this in angular- I have a Table and want to add the row on-click, but this row should have empty input boxes and a button to remove itself.

 <tbody>
        <tr>
            <th>Test 1</th>
            <th>200</th>
            <th>Add new row</th>
        </tr>
         //I want to Add this part dynamically everytime when I click on Add new row
                <tr>
                     <td>
                        <input type="text" placeholder="Please Enter the Address">
                    </td>
                    <td>
                        <input type="text" placeholder="Number of Quantity">
                    </td>
         //On Delete it should delete just that particular row
                    <td>Delete</td>
                </tr>

        </tbody>

I have created plunker http://plnkr.co/edit/DDj5Z99tw1QuN8xlxZ7V?p=preview just for showing what I am trying to achieve. If anyone would be able to give a hint or link me to tutorial would be great!

It seems as though you have no knowledge of angular. The plunker does not have an app or a controller. All you need to do is put an ng-click wherever you want to add a row, and make the function that gets called add an item to your data source. Check out any basic angular tutorial. — Josue Espinosa
– Josue Espinosa, Commented Nov 17, 2014 at 2:33
sorry if I did not made my self clear before. The plunker is created just for giving better understanding to my question. There are plenty of tutorial out there on adding row to the table. But my question is more specific towards adding input box in the table. — GeekOnGadgets
– GeekOnGadgets, Commented Nov 17, 2014 at 2:51
You should have completed the setup in plunker so someone could help you immediately. — cpz
– cpz, Commented Nov 17, 2014 at 2:54

cpz · Accepted Answer · 2014-11-17 03:01:33Z

1

Please have look at this plunker.

http://plnkr.co/edit/ogvezWz6WDwDhCnm2bDU

Idea is to use a row at the end whose visibility can be controlled. And using ngRepeat you can iteratively display your added product items.

    <tr ng-repeat="row in rows">
         <td>
            {{row.product}}
        </td>
        <td>
            {{row.quantity}}
        </td>
        <td>
          <button ng-click="deleteRow($index)">Delete</button>
          <button ng-click="addNewRow()">New</button>
        </td>
    </tr>
    <tr ng-show="addrow">
         <td>
            <input type="text" placeholder="Please Enter the Address" ng-model="product"/>
        </td>
        <td>
            <input type="text" placeholder="Number of Quantity" ng-model="quantity"/>
        </td>
        <td><button ng-click="save()">Save</button> <button ng-click="delete()">Delete</button></td>
    </tr>

And the Controller code

angular.module('AddRow', [])
.controller('MainCtrl', [
'$scope', function($scope){
  $scope.rows = [ { "product": "Test 1", "quantity": "200"}];
  $scope.addrow = false;

  $scope.addNewRow = function(){
    $scope.addrow = true;
  };

  $scope.deleteRow = function(index){
    //delete item from array
    $scope.rows.splice(index,1);
  };

  $scope.save = function(){
    //add item to array
    $scope.rows.push({"product": $scope.product, "quantity": $scope.quantity});
    //reset text input values
    $scope.product = "";
    $scope.quantity = "";
    //hide the add new row
    $scope.addrow = false;
  };

  $scope.delete = function(){
    $scope.addrow = false;
  };
}]);

answered Nov 17, 2014 at 3:01

cpz

1,0322 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

GeekOnGadgets Over a year ago

Thanks mate :). I had a quick look at your solution, the new button only works ones. But great effort.

cpz Over a year ago

So you want to be able to add multiple empty rows with text boxes?

GeekOnGadgets Over a year ago

Yes, that' the problem now I am facing in my actual code :).

cpz Over a year ago

May be using ngHtmlBind could help here somehow. Let me try something quick.

cpz Over a year ago

Now it does what you want for adding multiple rows. Please check the plunker. BUT there is a problem in updating the text input values to the model.

|

Collectives™ on Stack Overflow

Add/remove input boxes to the table row in Angular dynamically

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related