JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<div ng-app='myApp' ng-controller="ArrayController">
   <form action="#" > 
       <form></form>
    <form   editable-form name="textBtnForm"> 
        <span editable-text="user.name">
   {{ user.name || 'empty' }}
        </span>
        <small type="button" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">e
        </small>
        <span ng-show="textBtnForm.$visible">
            <button type="submit" class="btn btn-primary" ng-disabled="textBtnForm.$waiting">
              Save
            </button>
            <button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
              Cancel
            </button>
        </span>
        
    </form>
<form action="#" editable-form name="textBtnForm2"> 
        
        <span editable-text="user.phone">
    {{ user.phone || 'empty' }}
        </span>
        <button type="button" ng-click="textBtnForm2.$show()" ng-hide="textBtnForm2.$visible">edit
        </button>
        <span ng-show="textBtnForm2.$visible">
            <button type="submit" ng-disabled="textBtnForm2.$waiting">
              Save
            </button>
            <button type="button" class="btn btn-default" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$cancel()">
              Cancel
            </button>
        </span>
    </form>
       <form action="#" editable-form name="textBtnForm1"> 
        
        <span editable-text="user.place">
    {{ user.place || 'empty' }}
        </span>
        <button type="button" ng-click="textBtnForm1.$show()" ng-hide="textBtnForm1.$visible">edit
        </button>
        <span ng-show="textBtnForm1.$visible">
            <button...

CSS

body{margin:20px;}small{color:lightgrey;margin-top:-12px;position:absolute}

JavaScript

var app = angular.module('myApp', ["xeditable"]);
app.controller('ArrayController', function ($scope) {
    $scope.test = "editable test words";
    $scope.user = {
        name: 'name',
        place: 'TEST',
        phone: '000 000 0000'
    };
});