JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">    
    <div>
        <select ng-model="showCaption[0]">
            <option value="-1">Hide</option>
            <option value="0">Caption</option>
            <option value="1">Text</option>
        </select>
        <select ng-model="showCaption[1]">
            <option value="-1">Hide</option>
            <option value="0">Caption</option>
            <option value="1">Text</option>
        </select>
    <div>
    <test-caption class="capClass" ng-repeat="caption in captions"></v>    
    <div>
<div>

CSS

.capClass {
    display: inline-block;    
    width: 150px;
    margin: 5px;
}

JavaScript

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


testApp.controller('testCtrl', function ($scope) {
    $scope.captions = [];
    for (var i = 0; i < 100; i++) {
        $scope.captions.push({text: ['caption-' + i, 'text-' + i]});                            
    }
    $scope.showCaption = [0,1];
    $scope.changeCaption = function(caption, index) {
        caption.text[index] = prompt('New caption');
    };
});



testApp.directive('testCaption', function () {
        return {            
            restrict: 'E',
            template: '<div ng-click="changeCaption(caption, 0)" ng-if="showCaption[0] != -1">{{caption.text[showCaption[0]]}}</div><div ng-click="changeCaption(caption, 1)" ng-if="showCaption[1] != -1">{{caption.text[showCaption[1]]}}</div>'            
        }
});