JSFiddle - React, Tailwind, and code Playground

by flexin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="denja" class="row">
    <div class="col-md-12">
<div ng-controller="ObjectController as o">
    VIEW: <select ng-model="o.view">
      <option value="list">List all objects</option>
      <option value="view">View an object</option>
      <option value="update">Update an object</option>
    </select>
    <span ng-hide="o.view == 'list'">
        
    OBJECT: <select ng-model="o.id">
      <option value="{{ob.id}}" ng-repeat="ob in o.objects">{{ob.name.tv}} {{ob.firstname.tv}}</option>
      
    </select>
    </span>
    <hr/>selected view: {{o.view}} <span ng-hide="o.view == 'list'">- selected object ID: {{o.id}}</span>

<hr>
    <div ng-hide="o.view == 'list'"><a href="#" ng-click="o.setView('list')">back to list</a></div>
<div ng-show="o.view == 'list'" class="well">
    ORDER BY: {{o.order.by}}
    <table class="table table-striped table-hover table-bordered">
        <tr>
            <th ng-repeat="a in o.attr"><a href="" ng-click="o.order.by = a.name + '.tv'; o.order.reverse = -o.order.reverse;">{{a.caption}}</a></th><th></th>
        </tr>
        <tr ng-repeat = "obj in o.objects | orderBy:order.by:order.reverse">
            <td ng-repeat="a in o.attr">{{obj[a.name].tv}}</td>
            <td><a href="#" ng-click="o.setView('view', obj.id)">view</a> | <a href="#" ng-click="o.setView('update', obj.id)">update</a></td>
        </tr>
    </table>
    <hr/>
    Showing {{o.objects.length}} objects
    
    </div>    
    <div ng-show="o.view == 'view'" class="well">
        <h2>Showing <span class="label label-primary">{{o.objects[o.id].summary}}</span></h2>
         <div ng-repeat="attr in o.attr" class="row">
                <strong...

JavaScript

(function() {
    
    
    // let's define our module
    var app = angular.module('denja', ['ngRoute']);
    app.directive('denjawidget', function ($compile) {
        var linker = function(scope, element, attrs) {
            element.html(getTemplate(scope.a.type));
            $compile(element.contents())(scope);
        }
        
        var updateScope = function() {
            alert('in the update');
            scope.$apply(function() {
                scope.text = element.val();
            });
        }
        
        
        
        var getTemplate = function(widgetType) {
            switch(widgetType) {
                case 'amount':
                    var template = '<input placeholder="{{a.caption}}" class="form-control" type="number" step="0.01" value=" {{o.objects[o.id][a.name].v}}"> <select class="form-control" ><option value="EUR" ng-selected="o.objects[o.id][a.name].iso == \'EUR\'">EURO</option><option value="USD" ng-selected="o.objects[o.id][a.name].iso == \'USD\'">US Dollar</option></select>';
                    break;
                default:
            
                    var template = '<input placeholder="{{a.caption}}"  class="form-control" type="text" value=" {{o.objects[o.id][a.name].tv}}">';
            }
            return template;
        }
    
        return {
            restrict: "E",
            link: linker,
            scope: {
                o:'=widgetObject',
                a:'=widgetAttr'
            }
        };
    });     
    app.factory('ObjectService', ['$interval', function($interval) {
        var d = {
            attr: [
                {name: 'name', type:'text', caption:'Naam'},
                {name: 'firstname', type: 'text', caption:'Voornaam'},
                {name: 'street', type:'text', caption:'Straat + Nr.'},
                {name: 'zip', type:'text', caption:'Postcode'},
                {name: 'city', type:'text', caption:'Gemeente'},
                {name: 'country', type:'text',...