JSFiddle - React, Tailwind, and code Playground

by rakeshjack

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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">
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="" ng-controller="">
  <div>Email: <a href="#" editable-email="user.email">{{ user.email || 'empty' }}</a></div>
  <div>Tel: <a href="#" editable-tel="user.tel" e-pattern="\d{3}\-\d{2}\-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a></div>
  <div>Number: <a href="#" editable-number="user.number" e-min="18">{{ user.number || 'empty' }}</a></div>  
  <div>Range: <a href="#" editable-range="user.range" e-step="5">{{ user.range || 'empty' }}</a></div>  
  <div>Url: <a href="#" editable-url="user.url">{{ user.url || 'empty' }}</a></div>  
  <div>Search: <a href="#" editable-search="user.search">{{ user.search || 'empty' }}</a></div>  
  <div>Color: <a href="#" editable-color="user.color">{{ user.color || 'empty' }}</a></div>  
  <div>Date: <a href="#" editable-date="user.date">{{ user.date || 'empty' }}</a></div>  
  <div>Time: <a href="#" editable-time="user.time">{{ user.time || 'empty' }}</a></div>  
  <div>Datetime: <a href="#" editable-datetime="user.datetime">{{ user.datetime || 'empty' }}</a></div>  
  <div>Month: <a href="#" editable-month="user.month">{{ user.month || 'empty' }}</a></div>  
  <div>Week: <a href="#" editable-week="user.week">{{ user.week || 'empty' }}</a></div>  
</div>

CSS

div[ng-app] { margin: 5px; }
div[ng-controller="Ctrl"] > div {
   height: 35px;
}
div[ng-controller="Ctrl"] > div > * {
   vertical-align: top;
}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope) {
  $scope.user = {
    email: '[email protected]',
    tel: '123-45-67',
    number: 29,
    range: 10,
    url: 'http://example.com',
    search: 'blabla',
    color: '#6a4415',
    date: null,
    time: '12:30',
    datetime: null,
    month: null,
    week: null
  };  
});