JSFiddle - React, Tailwind, and code Playground

by Samar Pattanayak

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
    {{val}}
    <script type="text/ng-template" id="edit.html">
      <table>
        <tr>
          <td>Edit Your Name :</td>
          <td>
            <input type="text" ng-model="userdata.Name" /> </td>
        </tr>
        <tr>
          <td> Age :</td>
          <td>
            <input type="text" ng-model="userdata.Age" />
          </td>
        </tr>
        <tr>
          <td col-span="2">
            <button id="btnUpdate" ng-click="update(userdata)">Update</button>
          </td>
        </tr>
      </table>
    </script>
    <script type="text/ng-template" id="add.html">
      <table>
        <tr>
          <td> Your ID :</td>
          <td>
            <input type="text" ng-model="new.id" /> </td>
        </tr>
        <tr>
          <td>Enter Your Name :</td>
          <td>
            <input type="text" ng-model="new.Name" /> </td>
        </tr>
        <tr>
          <td> Age :</td>
          <td>
            <input type="text" ng-model="new.Age" />
          </td>
        </tr>
        <tr>
          <td col-span="2">
            <button id="btnAdd" ng-click="add(new)">ADD</button>
          </td>
        </tr>
      </table>
    </script>

    <div ng-include="getTemplate()" ng-show=true></div>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr ng-repeat="value in userdata">
        <td>{{value.Name}}</td>
        <td>{{value.Age}}</td>
        <td>
          <button id="btnEdit" ng-click="edit(value)">
            Edit
          </button>
          <button id="btnDelete" ng-click="delete(value)">
            Delete
          </button>
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

table,
th,
td {
  border: 1px solid grey
}

th,
td {
  width: 100px;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
  $scope.val = true;
  $scope.userdata = [{
    id: 1,
    Name: "Samar",
    Age: 24
  }, {
    id: 2,
    Name: "Sourav",
    Age: 26
  }, {
    id: 3,
    Name: "Debasish",
    Age: 28
  }, ];
  $scope.edit = function(value) {
    //alert(value.Age);
    $scope.userdata.Name = value.Name;
    $scope.userdata.Age = value.Age;
    $scope.rowNumb = value.id - 1;

    $scope.ind = false
  };
  $scope.update = function(uvalue) {
    console.log(uvalue.id);
    $scope.userdata[$scope.rowNumb].Name = uvalue.Name;
    $scope.userdata[$scope.rowNumb].Age = uvalue.Age;

    $scope.ind = true;
  }
  $scope.getTemplate = function() {
    if ($scope.ind == false) {
      return 'edit.html';
    } else {
      return 'add.html';
    }
  };
  $scope.add = function(newv) {
    $scope.userdata.push(newv);
  }
  $scope.delete = function(valu) {
    var indexArray = $scope.userdata.indexOf(valu);
    alert(indexArray);
    //$scope.userdata.pop(valu);
    $scope.userdata.splice(indexArray, 1);
  }

});