JSFiddle - React, Tailwind, and code Playground

by Mahavirsinh Padhiyar

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <table class="table table-bordered table-hover" style="width: 800px">
        <tr>
            <th>#</th>
            <td>FirstName</td>
            <th>LastName</th>
            <th>Country</th>
            <th>State</th>
        </tr>
        <tr data-ng-repeat="friend in friends">
            <td><strong>{{ friend.Id }}</strong>
            </td>
            <td>
                <p data-ng-hide="friend.editMode">{{ friend.firstname}}</p>
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.firstname" />
            </td>
            <td>
                <p data-ng-hide="friend.editMode">{{ friend.lastname}}</p>
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.lastname" />
            </td>
            <td>
                <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p>
                <select data-ng-show="friend.editMode" ng-model="friend.Country" ng-options="country.Name for country in countries track by country.Id "></select>
            </td>
            <td>
                <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p>
                <select data-ng-show="friend.editMode" ng-model="friend.State" ng-options="state.Name for state in states track by state.Id "></select>
            </td>
            <td>
                <p><a data-ng-click="toggleEdit(friend)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(friend)" href="javascript:;">Delete</a>
                </p>
            </td>
        </tr>
    </table>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',

function ($scope) {

    $scope.countries = [{
        "Id": 1,
        "Name": "America",
    }, {
        "Id": 2,
        "Name": "Australia",
    }, {
        "Id": 3,
        "Name": "london",
    }];
    
    $scope.states = [
    {
            Id: 1,
            CountryId: 1,
            Name: "Chicago",
        },{
            Id: 2,
            CountryId: 2,
            Name: "sydney",
        },
        {
            Id: 3,
            CountryId: 3,
            Name: "abc",
        }
    ];

    $scope.friends = [{
        firstname: 'Mary',
        lastname: 'asasdas',
        Country: {
            "Id": 1,
            "Name": "America",
        },
        State: {
            Id: 1,
            CountryId: 1,
            Name: "Chicago",
        }
    }, {
        firstname: 'John',
        lastname: 'casilla',
        Country: {
            "Id": 2,
            "Name": "Australia",
        },
        State: {
            Id: 2,
            CountryId: 2,
            Name: "sydney",
        }
    },



    {
        firstname: 'Neel',
        lastname: 'dcosta',
        Country: {
            "Id": 3,
            "Name": "london",
        },
        State: {
            Id: 3,
            CountryId: 3,
            Name: "abc",
        }
    }, ];

    $scope.toggleEdit = function () {
        this.friend.editMode = !this.friend.editMode;
        // console.log($scope.addMode)
        // $scope.addMode = !$scope.addMode;
    };

}]);