Angular Table row dissapears after editing it

I'm using ng-repeat in an table to dynamically generate contents. I have given an option to edit and delete the table contents.

But the issue I'm facing is that once I edit and save a row, It disappears. I tried manually adding value to table row using jQuery but still it did not work.

Here is the Codepen Link for my code.

Here's my html page:

 <div class="container" ng-app="trial">
   <table class="table table-hover" ng-controller="newTrial">
     <tr>
       <th class="col-md-3">Name</th>
       <th class="col-md-2">Age</th>
       <th class="col-md-5">Description</th>
       <th class="col-md-2">Actions</th>
     </tr>
     <tr ng-repeat="entry in entryList">
       <td ng-hide="edit[$index]">{{entry.name}}</td>
       <td ng-hide="edit[$index]">{{entry.age}}</td>
       <td ng-hide="edit[$index]">{{entry.desc}}</td>
       <td ng-hide="edit[$index]">
         <button class="btn btn-primary" ng-click="editEntry($index)">Edit</button>
         <button class="btn btn-danger" ng-click="deleteEntry($index)">Delete</button>
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.name" id="nameEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.age" id="ageEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <input type="text" class="form-control" ng-value="entry.desc" id="descEdit$index" />
       </td>
       <td ng-show="edit[$index]">
         <button class="btn btn-success" ng-click="saveEntry($index)">Save</button>
         <button class="btn btn-warning" ng-click="cancelEntry($index)">Cancel</button>
       </td>
     </tr>

   </table>
 </div>

Here's my javascript file:

var app = angular.module('trial', []);

app.controller('newTrial', ["$scope", function($scope){
  $scope.edit = [false, false, false];
  $scope.entryList = [
    {
      name: "ABC",
      age: 30,
      desc: "Something he does"
    },
    {
      name: "DEF",
      age: 35,
      desc: "Something he does not do"
    },
    {
      name: "GHI",
      age: 32,
      desc: "Something he is good at"
    }
  ];
  $scope.editEntry = (i) => {
    $scope.edit[i] = true;
  };
  $scope.deleteEntry = (i) => {
    $scope.edit.splice( i , 1 );
    $scope.entryList.splice( i , 1 );
  };
  $scope.saveEntry = (i) => {
    $scope.entryList[i].name = angular.element("nameEdit"+i).val();
    $scope.entryList[i].age = angular.element("ageEdit"+i).val();
    $scope.entryList[i].desc = angular.element("descEdit"+i).val();
    $scope.edit[i] = false;
  };
  $scope.cancelEntry = (i) => {
    $scope.edit[i] = false;
  };
}]);

Answers 1

  • Don't know why you write down show much code you can do it simply as follow:-

     <tr ng-repeat="entry in entryList" >
           <td ng-if="!entry.isEditable">{{entry.name}}</td>
           <td ng-if="!entry.isEditable">{{entry.age}}</td>
           <td ng-if="!entry.isEditable">{{entry.desc}}</td>
           <td ng-if="!entry.isEditable">
             <button class="btn btn-primary" ng-click="entry.isEditable = !entry.isEditable">Edit</button>
             <button class="btn btn-danger" ng-click="deleteEntry(entry)">Delete</button>
           </td>
            <td ng-if="entry.isEditable">
             <input type="text" class="form-control" ng-model="entry.name"  />
           </td>
           <td ng-if="entry.isEditable">
             <input type="text" class="form-control" ng-model="entry.age"  />
           </td>
           <td ng-if="entry.isEditable">
             <input type="text" class="form-control" ng-model="entry.desc"  />
           </td>
           <td ng-if="entry.isEditable">
             <button class="btn btn-success" ng-click="saveEntry(entry)">Save</button>
             <button class="btn btn-warning" ng-click="entry.isEditable = !entry.isEditable">Cancel</button>
           </td>
    
         </tr>
    

    In you controller

     $scope.deleteEntry = (i) => {
        $scope.entryList.splice( i , 1 );
      };
      $scope.saveEntry = (entry) => {
        //do somthing here
     entry.isEditable = !entry.isEditable
      };
    

    Working pulker


Related Articles