JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div ng-app="userSelection" ng-controller="UserController"> <b>Names</b>

    <ul>
        <li ng-repeat="user in userList"> <a ng-click="selectUser(user)">{{user.getFullName()}}</a>

        </li>
    </ul>
    <hr> <b>Selected User</b>

    <br>First Name:
    <input type="text" ng-model="currentUser.firstName">
    <br>Last Name:
    <input type="text" ng-model="currentUser.lastName">
        <br>Address:
        <input type="text" ng-model="currentUser.address.street" />
    <br>Full Name: {{currentUser.getFullName()}}
        <br />Address: {{currentUser.address.getFullAddress()}}
</div>

CSS

a {
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

var userSelection = angular.module("userSelection", []);

userSelection.factory("Address", function() {
    return function Address(street, zip) {
        this.street = street;
        this.zip = zip;
        
        this.getFullAddress = function() {
            return this.street + ", " + this.zip;            
        };
    };
});

userSelection.factory("User", function () {

    return function User(firstName, lastName, address) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.address = address;

        this.getFullName = function () {
            return this.firstName + " " + this.lastName;
        }
    };
});

userSelection.controller("UserController", ["$scope", "User", "Address",

function UserController($scope, User, Address) {
    $scope.userList = [
    new User("John", "Doe", new Address("foobar", 12345)),
    new User("Henri", "de Bourbon", new Address("foobar", 12345)),
    new User("Marguerite", "de Valois", new Address("foobar", 12345)),
    new User("Gabrielle", "d'Estrées", new Address("foobar", 12345))];

    // select the first user of the list
    $scope.currentUser = $scope.userList[0];

    // expose a callable method to the view
    $scope.selectUser = function (user) {
        $scope.currentUser = user;
    }
}]);