Untitled

    <!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="w3-container">

<h3>Users</h3>

<table class="w3-table w3-bordered w3-striped">
  <tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr ng-repeat="user in users">
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
     <td>
      <button class="w3-btn w3-ripple" ng-click="editUser($index)">Edit</button>
    </td>
    <td>
      <button class="w3-btn w3-ripple" ng-click="deleteUser($index)">Delete</button>
    </td>
  </tr>
</table>
<br></br>

<h3 ng-if="!editMode">Create New User</h3>
<h3 ng-if="editMode">Edit Existing User</h3>

<form>
    <label>First Name:</label>
    <input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name">
  <br>
    <label>Last Name:</label>
    <input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name">
    <br></br>

<button class="w3-btn w3-green w3-ripple" ng-if="!editMode" ng-click="addUser()">Save Changes</button>
<button class="w3-btn w3-green w3-ripple" ng-if="editMode" ng-click="addUser(editIndex)">Save Changes</button>

</form>

</div>

<script src= "script.js"></script>

</body>
</html>

// Code goes here

 angular.module('myApp', []).controller('userCtrl', function($scope) {

$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim',  lName:"Pim" },
{id:3, fName:'Sal',  lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];

$scope.addUser=function(index){
  if(index){
    $scope.users[index].fName=$scope.fName;
    $scope.users[index].lName=$scope.lName;
    }
  else{
    var newId=$scope.users.length+1;
    $scope.users.push({
        'id':newId,
        'fName':$scope.fName,
        'lName':$scope.lName,
    });
  }
  $scope.editMode=false;
   $scope.fName='';
   $scope.lName='';
       
}

$scope.editUser=function(index){
  $scope.editMode=true;
  $scope.editIndex=index;
  $scope.fName=$scope.users[index].fName;
  $scope.lName=$scope.users[index].lName;
}

$scope.deleteUser=function(index){
   $scope.users.splice(index,1)
}

});

/* Styles go here */