JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app ng-controller="UserEditController">
    <h1>All users</h1>
    <ul>
        <li ng-repeat='user in users'>{{user.firstname}} {{user.lastname}}
            <button ng-click='edit(user)'>Edit</button>
        </li>
    </ul>
    
    <div ng-show='userUnderEdit'>
        
        <h2>Editing {{editUser.firstname}} {{editUser.lastname}}</h2>
        
        first name: <input type='text' ng-model='userUnderEdit.firstname' /><br/>
        last name: <input type='text' ng-model='userUnderEdit.lastname' /><br/>
        phone: <input type='text' ng-model='userUnderEdit.phone' /><br/>
        
        <button ng-click='cancel()'>Cancel</button>
        <button ng-click='save()'>Save</button>
    </div>
</div>

JavaScript

function UserEditController($scope)
{
    $scope.users = [
        { id: 1, firstname: 'Wackford', lastname: 'Squeers', phone: '1234 567890' },
        { id: 2, firstname: 'Oliver', lastname: 'Twist', phone: '5678 123456' },
        { id: 3, firstname: 'Seth', lastname: 'Pecksniff', phone: null },
    ];   
        
    $scope.userUnderEdit = null;
       
    $scope.edit = function(user){
        $scope.editUser = user;
        $scope.userUnderEdit = angular.copy(user);
    };
        
    $scope.cancel = function(){
        $scope.userUnderEdit = null;
    };
        
    $scope.save = function(){
        for( var i = 0; i < $scope.users.length; i++ ){
            if( $scope.users[i].id == $scope.userUnderEdit.id ){
                $scope.users[i] = angular.copy($scope.userUnderEdit);
                break;
            }
        }
        $scope.userUnderEdit = null;
    };
}