JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS - Bootstrap by Luizz</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="//twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <script src="//code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
    </head>
    <body ng-app>
        <div class="container">
        <form class="span6" ng-controller="formController">
            <fieldset>
                <legend>AngularJS - Bootstrap - by Luizz</legend>
            <div class="input-item control-group" ng-repeat="input in inputList">
                <label class="control-label" for="{{input.id}}">{{input.label}}</label>
                <div class="controls">
                <input id="{{input.id}}" name="{{input.name}}" size="{{input.size}}" maxlenght="{{input.maxlenght}}"  style="{{input.style}}" ng-model="input.value" />
                </div>
            </div>
            
            <div class="select-item control-group" ng-repeat="select in selectList">
                <label for="{{select.id}}">{{select.label}}</label>
                <select id="{{select.id}}" name="{{select.name}}" size="{{select.size}}" style="{{input.style}}" 
                ng-options="option.text for option in select.options" ng-model="select"></select>
            </div>
            
            <div class="textarea-item control-group" ng-repeat="textarea in textAreaList">
                <label for="{{textarea.id}}">{{textarea.label}}</label>
                <textarea id="{{textarea.id}}" name="{{textarea.name}}" cols="{{textarea.cols}}" row="{{textarea.row}}" maxlenght="{{textarea.maxlenght}}" style="{{input.style}}" ng-model="textarea.text"></textarea>
            </div>
                
             <div class="button-item control-group" ng-repeat="button in buttonList">
                <div class="controls">
                    <button class="btn" id="{{button.id}}"...

JavaScript

function formController($scope, $window, $http) {
     
    $scope.inputList = 
        [
        {label: "Nome:", id: "nome", name: "nome", value:"", size: 20, maxlenght: 30, style:''},
        {label: "Email:", id: "email", name: "email", value:"", size: 20, maxlenght: 30, style:'background:#fff'}
       ];
     
    $scope.selectList = 
        [
        {label: "Cidades:", id: "cidade", name: "cidade", options:[ {value:1, text:"Campo Grande"},{value:2, text:"Terenos"} ], size: 1, style:''},
        {label: "Estado:", id: "estado", name: "estado", options:[ {value:1, text:"Mato grosso do Sul"},{value:2, text:"Mato grosso"} ], size: 1, style:''}
         ];   


     $scope.textAreaList = 
         [
             {label: "Mensagem:", id: "msg", name: "msg", text:"", cols: 20, row:20, maxlenght: 30, style:''},
             {label: "Mensagem:", id: "msg", name: "msg", text:"", cols: 20, row:20, maxlenght: 30, style:''}
         ];

$scope.buttonList = 
         [
             {text: "Voltar", id: "voltar", name: "voltar", type:"button", style:''},
             {text: "Adicionar", id: "adicionar", name: "adicionar", type:"submit", style:''},
         ];         
     
  }