To edit and delete the tabular rows in angularjs

Question

I have employees array that consist of employeeid, name and location. I need to edit, delete, update,add and save them in a tabular column.I was successful in viewing the table, however, as i searched on web, i got two similar links that show how to edit,cancel and save the employees. The links are : https://jsfiddle.net/UWLFJ/1970/ and http://blog.shubhamsaxena.com/creating-simple-inline-editing-with-angularjs/

I fail to accomplish the task. I am getting error - TypeError: Cannot read property 'id' of undefined .(app.js:58). Please help me accomplish it.

index.html -

 <html ng-app="Swabhav.Employee">
  <head>
    <title>Employee</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>

     <script src="app.js"></script>
     <section ng-view></section>
   </body>
 </html>

app.js

   angular.module("Swabhav.Employee",['ngRoute'])
      .config(['$routeProvider',function($routeProvider){

       $routeProvider
        .when('/',{
         controller:"HomeController",
         templateUrl:"home.html"

     })

  }])


     angular.module("Swabhav.Employee")

    .factory("EmployeeService",["$log",function($log){

     var employees=[{"empId":1,"name":"John","location":"Mumbai"},
                    {"empId":2,"name":"Nikita","location":"Mumbai"},
                     {"empId":3,"name":"Saurab","location":"Pune"},
                    {"empId":4,"name":"Ankita","location":"Bangalore"},
                    {"empId":5,"name":"Harsh","location":"Chennai"},
                    {"empId":6, "name":"Geeta","location":"Vellore"}];

       var obj={};

      obj.displayAll=function(){

                    return employees;
               }       

    return obj;

    }])

   angular.module("Swabhav.Employee")
       .controller("HomeController",
  ["$scope","EmployeeService","$log",function($scope,EmployeeService,$log){

   $log.log (EmployeeService.displayAll());   

   $scope.data=EmployeeService.displayAll();

   $scope.getTemplate = function (employee) {
    if (employee.id == $scope.selected.id){
     return 'edit';
    }
    else 
    return 'display';
   };

     $scope.editEmployee=function(employee){
       $scope.selected=angular.copy(employee);
    }



   $scope.saveEmployee = function (index) {
    console.log("Saving employee");
    $scope.data[index] = angular.copy($scope.selected);
    $scope.reset();
   };

  $scope.reset = function () {
    $scope.selected = {};
  };
  }])

home.html

   <article>
   <table class="table table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Location</th>
            <th> Edit </th>

        </tr>
    </thead>
     <tbody>
        <tr ng-repeat="employee in data" ng-include="getTemplate(employee)">


            <script type="text/ng-template" id="display">
            <td>{{employee.empId}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.location}}</td>
            <td><button class="btn btn-primary" ng-
    click="editEmployee(employee)">Edit</button>
            <button class="btn btn-danger" ng-
    click="deleteEmployee(employee)">Delete</button></td>
            </script>
    <script type="text/ng-template" id="edit">
         <td><input type="text" ng-model="employee.empId"></td>
         <td><input type="text" ng-model="employee.name" /></td>
         <td><input type="text" ng-model="employee.location" /></td>
         <td>
        <button ng-click="updateEmployee(employee)">Save</button>
        <button ng-click="reset()">Cancel</button>
         </td>
     </script>
    </tr>
   </tbody>
</table> 

  </article>

just console your JSON.stringify($scope.data). and paste that — Sangram Badi
– Sangram Badi, Commented Apr 3, 2018 at 14:26
[{"empId":1,"name":"John","location":"Mumbai"},{"empId":2,"name":"Nikita","location":"Mumbai"},{"empId":3,"name":"Saurab","location":"Pune"},{"empId":4,"name":"Ankita","location":"Bangalore"},{"empId":5,"name":"Harsh","location":"Chennai"},{"empId":6,"name":"Geeta","location":"Vellore"}] — java_jazz
– java_jazz, Commented Apr 3, 2018 at 14:29

Moshiour Rahman · Accepted Answer · 2018-04-03 16:44:03Z

2

home.html

<article>
   <table class="table table-bordered">
   <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Location</th>
        <th> Edit </th>

    </tr>
</thead>
 <tbody>
    <tr ng-repeat="employee in data" ng-include="getTemplate(employee)">
  </tr>
</tbody>
</table> 

</article>

display.html

<td>{{employee.empId}}</td>
<td>{{employee.name}}</td>
<td>{{employee.location}}</td>
<td><button class="btn btn-primary" ng- 
click="editEmployee(employee)">Edit</button>
<button class="btn btn-danger" ng- 
click="deleteEmployee($index)">Delete</button></td>

edit.html

    <td><input type="text" ng-model="employee.empId"></td>
    <td><input type="text" ng-model="employee.name" /></td>
    <td><input type="text" ng-model="employee.location" /></td>
    <td>
        <button ng-click="saveEmployee(employee)">Save</button>
        <button ng-click="reset()">Cancel</button>
    </td>

app.js

    angular.module("Swabhav.Employee",['ngRoute'])
      .config(['$routeProvider',function($routeProvider){

       $routeProvider
        .when('/',{
         controller:"HomeController",
         templateUrl:"home.html"

     })

  }])


     angular.module("Swabhav.Employee")

    .factory("EmployeeService",["$log",function($log){

     var employees=[{"empId":1,"name":"John","location":"Mumbai"},
                    {"empId":2,"name":"Nikita","location":"Mumbai"},
                     {"empId":3,"name":"Saurab","location":"Pune"},
                    {"empId":4,"name":"Ankita","location":"Bangalore"},
                    {"empId":5,"name":"Harsh","location":"Chennai"},
                    {"empId":6, "name":"Geeta","location":"Vellore"}];

       var obj={};

      obj.displayAll=function(){

                    return employees;
               }       

    return obj;

    }])

   angular.module("Swabhav.Employee")
       .controller("HomeController",
  ["$scope","EmployeeService","$log",function($scope,EmployeeService,$log){

   $log.log (EmployeeService.displayAll());   

   $scope.data=EmployeeService.displayAll();

   $scope.getTemplate = function (employee) {
    if ($scope.selected  != undefined) {
        if (employee.empId == $scope.selected.empId){ return 'edit.html'; }
    }
      return 'display.html';

   };

     $scope.editEmployee=function(employee){
      console.log(employee);
       $scope.selected=angular.copy(employee);
    }

      $scope.deleteEmployee=function($index){
        console.log($index);
        $scope.data.splice($index , 1);
      }



   $scope.saveEmployee = function (index) {
    console.log("Saving employee");
    $scope.data[index] = $scope.selected;
    $scope.reset();
   };

  $scope.reset = function () {
    $scope.selected = {};
  };
  }])

edited Apr 3, 2018 at 16:44

answered Apr 3, 2018 at 14:33

Moshiour Rahman

214 bronze badges

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

3 Comments

Aleksey Solovey Over a year ago

key word is "of undefined", meaning the object itself is undefined, not the properties of that object

Moshiour Rahman Over a year ago

It works now, However your should improve your app structure. I think you made it kind of complex for such easy Scenario.

Moshiour Rahman Over a year ago

Try now i wrote the delete function for you, You didn't Wrote any delete function. so i left it like it was.

Sangram Badi · Accepted Answer · 2018-04-04 05:44:03Z

2

$scope.getTemplate = function (employee) {
    if (employee.empId== $scope.selected.id){
     return 'edit';
    }
    else 
    return 'display';
};

change to employee.empId

You need to modify the row like below

 <tr ng-repeat="employee in data">

For edit and delete you need to use below.

<td><button class="btn btn-primary" ng-click="editEmployee(employee, $index)">Edit</button>
<button class="btn btn-danger" ng-click="deleteEmployee(employee,$index)">Delete</button></td>

APP.JS

$scope.editEmployee = function(employee, index) {
            console.log(employee);
            $scope.selected = angular.copy(employee);
        }

        $scope.deleteEmployee = function(employee, index) {
            console.log(index);
            $scope.data.splice(index, 1);
        }

Check https://plnkr.co/edit/A0I3ZdSBIS7jGSyUNhC8?p=preview

edited Apr 4, 2018 at 5:44

answered Apr 3, 2018 at 14:32

Sangram Badi

4,30412 gold badges50 silver badges86 bronze badges

1 Comment

Sangram Badi Over a year ago

@java_jazz please check my plunker. i have fixed it. your problem was at ng-include="getTemplate(employee)" and i removed it to <tr ng-repeat="employee in data"> plnkr.co/edit/A0I3ZdSBIS7jGSyUNhC8?p=preview

Collectives™ on Stack Overflow

To edit and delete the tabular rows in angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related