How to add a row on click of a "Add" button in angularJS

Question

I want to add a row in the table on click of "Add" button.I am trying to accomplish this using "ng-show" directive but that row is displaying even without clicking "Add" button. Please help me with this. Here is the code -

home.html -

    <table class="table">
        <thead>
          <tr>
            <th>SNo.</th>
            <th>UserId</th>
            <th>Name</th>
            <th>Share</th>
            <th>Paid</th>
          </tr>
        </thead>
        <tbody ng-repeat="member in members">
           <tr>
             <td>{{member.sNo}}</td>
             <td>{{member.id}}</td>
             <td>{{member.name}}</td>
             <td>{{member.share}}</td>
             <td>{{member.paid}}</td>
           </tr>
           <tr ng-show="show" class="ng-hide"> //the row which is to be added
             <td><span>{{counter}}</span></td>
             <td><input type="text" required ng-model="new.id"></td>
             <td><input type="text" required ng-model="new.name"></td>
             <td><input type="text" required ng-model="new.share"></td>
             <td><input type="text" required ng-model="new.paid"></td>
           </tr>    
       </tbody>
     </table>

    <div><input type="button" value="Add" ng-click="addMember()"/></div>

controller.js -

expmodule.controller('expenseForm', function($scope, sharedProperties) {
 var id, expenses = {};
 $scope.show = false;
 $scope.members = [{
  sNo: "1",
  id: "[email protected]",
  name: "Neha",
  share: 200,
  paid: 400,
 }, {
  sNo: "2",
  id: "[email protected]",
  name: "Sneha",
  share: 200,
  paid: 400,
}];
$scope.counter = $scope.members.length++;
$scope.addMember = function () {
  $scope.show = true;
  return $scope.newRow = true;
}
});

i have added it, and it is working on the click of "Add" button. But now it is appending with each row rather than appending to the last. Please let me know where i am going wrong. — Neha Gupta
– Neha Gupta, Commented Jun 1, 2014 at 17:51
@NehaGupta: If any of the answers below helped you with your problem, please mark it as accepted (and upvote it too if you want). — gkalpak
– gkalpak, Commented Jun 5, 2014 at 5:42

guru · Accepted Answer · 2014-06-01 17:51:47Z

Are you looking for something like this? http://plnkr.co/edit/jxXX5sWhgmYrANV7ieKM?p=preview

There are few things which are not correct in the code provided in the question.

The add row is inside ng-repeat. So a new add row will be added for each member.
Also as the show variable is inside ng-repeat it will be a child of parent scope and will be always false as per the current logic.
$scope.counter = $scope.members.length++ This will increase the array length by 1 and the new object in the array will be undefined. I guess you wanted to display the counter in the new add row. It can be simple done like this - {{members.length + 1}} in the add row rather than creating a new scope variable for this. Also this will always have the latest value when ever a new member is added.
The return statement in the addMember function has a assignment operation.

gkalpak · Accepted Answer · 2014-06-01 18:10:24Z

1

It seems to work fine (see demo below).

_{Of course, you should place the ng-repeat="member in members" to the <tr> not <tbody> (unless you want to have multiple tbodies).}

_{And you should change $scope.counter = $scope.members.length++; to $scope.counter = $scope.members.length + 1;}

See, also, this short demo.

edited Jun 1, 2014 at 18:10

answered Jun 1, 2014 at 17:43

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

How to add a row on click of a "Add" button in angularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related