JSFiddle - React, Tailwind, and code Playground

by ckosloski

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.2.0/css/xeditable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.2.0/js/xeditable.min.js"></script>
<div ng-app="app">
  <script id="test.html" type="text/ng-template">
    <p>Test</p>
    <form editable-form name="editableForm">
   		<a href="#" editable-text="user.name" e-label="User Name">{{ user.name || 'empty' }}</a>
          <div class="buttons">
      <!-- button to show form -->
      <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
        Edit
      </button>
      <!-- buttons to submit / cancel form -->
      <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
    </form>
  </script>

  <div ng-view></div>
</div>

JavaScript

angular
	.module("app", ["ngRoute", "xeditable"])
  .config(function($routeProvider) {
    $routeProvider
      .when("/test/", {
      	templateUrl: "test.html",
      	controller: "TestCtrl"
    	})
      .otherwise({ redirectTo: "/test/" });
  })
  .run(function (editableOptions) {
  	editableOptions.theme = "bs3";
	})
  .controller("TestCtrl", function() {
  	
  });