CODEWITHSUNDEEP
javascriptangularjs
Neha Gupta
Neha Gupta

Reputation: 1067

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

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;
}
});

Upvotes: 1

Views: 3088

Answers (2)

gkalpak
gkalpak

Reputation: 48211

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.

Upvotes: 1

guru
guru

Reputation: 4022

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.

  1. The add row is inside ng-repeat. So a new add row will be added for each member.
  2. 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.
  3. $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.
  4. The return statement in the addMember function has a assignment operation.

Upvotes: 2

Related Questions