Search Posts

To edit and delete the tabular rows in angularjs

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>

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.