<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script data-require="xeditable@0.1.8" data-semver="0.1.8" src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.2.0/js/xeditable.min.js"></script>
<script data-require="materialize@0.96.1" data-semver="0.96.1" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link data-require="materialize@0.96.1" data-semver="0.96.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="Table">
<div class="row">
<div class="col s12">
<form editable-form name="textBtnForm">
<table class="bordered">
<thead>
<tr>
<td>
<h5>My Form</h5>
</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col s4">
<span editable-text="user.name" e-form="textBtnForm">Name: {{user.name || name}}</span>
</td>
<td class="col s6">
<span editable-text="user.phone" e-form="textBtnForm">Phone: {{user.phone || phone}}</span>
</td>
</tr>
<tr class="row">
<td class="col s12">
<span editable-text="user.address" e-form="textBtnForm">Address: {{user.address || address}}</span>
</td>
</tr>
<tr>
<td class="col s6">
<span editable-text="user.contact" e-form="textBtnForm">Contact: {{user.contact || contact}}</span>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="row">
<div class="col s12">
<button class="btn blue lighten-2" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">Edit</button>
<span ng-show="textBtnForm.$visible">
<button type="submit" class="btn blue" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$save()">
Save
</button>
<button type="button" class="btn blue" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
Cancel
</button>
</span>
</div>
</div>
</body>
</html>
var app = angular.module("app", ["xeditable"]);
app.controller('Table', function($scope) {
$scope.user = {
name: '',
phone: '',
address: '',
contact: ''
};
});
/* Styles go here */