JSFiddle - React, Tailwind, and code Playground

by jillesme

HTML

<div ng-app="demo">
    <image-shower></image-shower>
</div>

CSS

ul li:hover {
    cursor: pointer;
}

JavaScript

angular.module('demo', [])
    .directive('imageShower', function () {
    return {
        restrict: 'E',
        template: [
            '<div>',
            	'<ul>',
            		'<li ng-repeat="user in ctrl.users" ng-click="ctrl.showPictureOf(user)">',
			            '{{ user.name }} is {{ user.age }} years old.',
            		'</li>',
	            '</ul>',
                '<div ng-if="ctrl.currentPerson">',
                    '<img ng-src="{{ctrl.currentPerson.img}}" width="200">',
                '</div>',
            '</div>'].join(''),
        controllerAs: 'ctrl',
        controller: function () {
            var ctrl = this;
            ctrl.users = [{
                name: 'Jilles',
                age: 21,
                img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/11027476_904378516319980_2541952383731227792_n.jpg?oh=c00ad4b914b96f8364c6cddc52eb8928&oe=56F68F2A'
            }, {
                name: 'Todd',
                age: 24,
                img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12289484_926596704092760_3553550773099720502_n.jpg?oh=de83d4237236b2915f40df3e8b225999&oe=56D6002E'
            }, {
                name: 'Lisa',
                age: 18,
                img: 'https://scontent-fra3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12196132_1233527680006580_5429755012807710307_n.jpg?oh=3f9d12c96ca01fb68f0457128e79b764&oe=56E1DFA8'
            }

            ];
            // for clarity, we don't need this
            ctrl.currentPerson = null;
            ctrl.showPictureOf = function (person) {
                ctrl.currentPerson = person;
            }
        }
    };
});