JSFiddle - React, Tailwind, and code Playground

by jwstott

HTML

<body ng-app="myModule" ng-controller="myController">
    <input type="text" ng-model="user.firstName" />
    <div>Hello, {{user.firstName}}!</div>
    <div ng-repeat="user in users | filter:user">{{user.firstName}} {{user.lastName}} - Age: {{user.age}} [{{user.fullName}}]</div>
    <button ng-click="changeFirstUsersFirstName()">Change Name</button>
</body>

JavaScript

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

myModule.controller('myController', function ($scope, userRepository) {
    $scope.users = userRepository.getAllUsers();

    $scope.changeFirstUsersFirstName = function () {
        $scope.users[0].firstName = 'Jill';
    };

});

myModule.factory('Instructor', [ModelInstructor]);
myModule.factory('userRepository', ['Instructor', userRepo]);

function userRepo(Instructor) {
    var users = [];
    users.push(new Instructor({
        firstName: 'Jane',
        lastName: 'Doe',
        age: 29
    }));
    users.push(new Instructor({
        firstName: 'John',
        lastName: 'Doe',
        age: 32
    }));
    return {
        getAllUsers: function () {
            return users;
        }
    };
}


function ModelInstructor() {
    function Ctor(obj) {
        var self = this;
        this.firstName = '';
        this.lastName = '';
        this.age = 0;

        init(obj);

        function init(val) {
            angular.extend(self, val);
            /*
            for (var i in val) {
                if (val.hasOwnProperty(i)) {
                    self[i] = val[i];
                }
            }
            */
        }
    }
    Object.defineProperty(Ctor.prototype, 'fullName', {
        get: function () {
            var fn = this.firstName;
            var ln = this.lastName;
            return ln ? fn + ' ' + ln : fn;
        }
    });
    return Ctor;
}