Angular X-editable Buttons=no option does not work with html5 fields
Angular X-editable Buttons=no option does not work with html5 fields
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<div>Email: <a href="#" editable-email="user.email" buttons="no">{{ user.email || 'empty' }}</a></div>
<div>Tel: <a href="#" editable-tel="user.tel" buttons="no" 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" buttons="no" e-min="18">{{ user.number || 'empty' }}</a></div>
<div>Range: <a href="#" editable-range="user.range" buttons="no" e-step="5">{{ user.range || 'empty' }}</a></div>
<div>Url: <a href="#" editable-url="user.url" buttons="no" >{{ user.url || 'empty' }}</a></div>
<div>Search: <a href="#" editable-search="user.search" buttons="no" >{{ user.search || 'empty' }}</a></div>
<div>Color: <a href="#" editable-color="user.color" buttons="no">{{ user.color || 'empty' }}</a></div>
<div>Date: <a href="#" editable-date="user.date" buttons="no">{{ user.date || 'empty' }}</a></div>
<div>Time: <a href="#" editable-time="user.time" buttons="no" >{{ user.time || 'empty' }}</a></div>
<div>Datetime: <a href="#" editable-datetime="user.datetime" buttons="no" >{{ user.datetime || 'empty' }}</a></div>
<div>Month: <a href="#" editable-month="user.month" buttons="no" >{{ user.month || 'empty' }}</a></div>
<div>Week: <a href="#" editable-week="user.week" buttons="no" >{{ 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
};
});