JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app="demo">
    <form ng-controller="demoCtrl as vm">
        <h3>Form:</h3>
        <div class="form-group">
            <label class="control-label">Titulo</label>
            <input type="text" class="form-control" ng-model="vm.titulo" />
        </div>
        <div class="form-group">
            <label class="control-label">Descripcion</label>
            <textarea class="form-control" ng-model="vm.descripcion"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">Opci&oacute;n A</label>
            <select class="form-control" ng-disabled="!vm.opcionesA" ng-model="vm.opcionA" ng-options="item.label for item in vm.opcionesA "></select>
        </div>     
        <div class="form-group">
            <label class="control-label">Opci&oacute;n B</label>
            <select class="form-control" ng-disabled="!vm.opcionesB" ng-model="vm.opcionB" ng-options="item.label for item in vm.opcionesB "></select>
        </div>     
        <div class="form-group">
            <label class="control-label">Opci&oacute;n C</label>
            <select class="form-control" ng-disabled="!vm.opcionesC" ng-model="vm.opcionC" ng-options="item.label for item in vm.opcionesC "></select>
        </div>
        <div>
            <button type="button" class="btn btn-default" ng-click="vm.cargarEjemplo1()">Uno</button>
            <button type="button" class="btn btn-default" ng-click="vm.cargarEjemplo2()">Uno</button>
            <button type="button" class="btn btn-default" ng-click="vm.cargarEjemplo3()">Uno</button>
        </div>
        <h3>Json:</h3>
        <pre>{{ 
            {
                titulo: vm.titulo,
                descripcion: vm.descripcion,
                opcionA: vm.opcionA,
                opcionB: vm.opcionB,
                opcionC: vm.opcionC
            } | json }}</pre>
    </form>
  ...

JavaScript

(function () {

    angular.module('demo', []).controller('demoCtrl', demoCtrl);
    
    function demoCtrl($http) {
        
        var vm = this;
        
        vm.opcionesA = null;
        vm.opcionesB = null;
        vm.opcionesC = null;
        
        vm.titulo = null;
        vm.descripcion = null;
        vm.opcionA = null;
        vm.opcionB = null;
        vm.opcionC = null;
    
    
        vm.cargarEjemplo1 = cargarEjemplo1;
        vm.cargarEjemplo2 = cargarEjemplo2;
        vm.cargarEjemplo3 = cargarEjemplo3;
    
        function cargarEjemplo1() {
            vm.titulo = 'Ejemplo 1';
            vm.descripcion = 'Esta es la descripción del primer ejemplo';
            vm.opcionA = '1';
            vm.opcionB = '1.1';
            vm.opcionC = '1.1.1';
        }
        
        function cargarEjemplo2() {
            vm.titulo = 'Ejemplo 2';
            vm.descripcion = 'Esta es la descripción del segundo ejemplo';
            vm.opcionA = '2';
            vm.opcionB = '2.2';
            vm.opcionC = '2.2.2';
        }
        
        function cargarEjemplo3() {
            vm.titulo = 'Ejemplo 3';
            vm.descripcion = 'Esta es la descripción del tercer ejemplo';
            vm.opcionA = '3';
            vm.opcionB = '3.3';
            vm.opcionC = '3.3.3';
        }
                
        function init()
        {
            // Obteniendo Opciones A
            simularUnGet($http, opcionesAResult).success(function (data) {
                vm.opcionesA = data;
            });
        }
        
        init();
        
    }

    var opcionesAResult = [{id: '1', label: 'Opción 1'},{id: '2', label: 'Opción 2'},{id: '3', label: 'Opción 3'}];

    function simularUnGet($http, expectedResult)
    {
        var dataEncoded = encodeURIComponent(angular.toJson(expectedResult));
        var echoData = 'json=' + dataEncoded + "&delay=1";
        var echoContentType = '';
        var echoHeaders = {};
        return $http.post('/echo/json/',...