JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.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">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<h4>Angular-xeditable demo</h4>
<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
<div class="item-wrapper">
<a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
</div>
<br><br>
<div class="item-wrapper">
<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a></div>
<br><br>
debug: {{ user | json }}
</div>
CSS
body{ margin-left:200px; }
.item-wrapper a{
display: inline !important;
}
.item-wrapper{
display: inline;
position: relative;
}
.item-wrapper form {
position: absolute;
top: -53px;
background: #FFF;
border: 1px solid #AAA;
border-radius: 5px;
padding: 7px;
width: 220px;
display: inline-block;
left: 50%;
margin-left: -110px;
z-index: 101;
}
.item-wrapper form:before{
content:"";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #AAA;
position:absolute;
bottom:-10px;
left:100px;
}
.item-wrapper form:after{
content:"";
width:0;
height:0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #FFF;
position:absolute;
bottom:-9px;
left:101px;
}
.editable-input{
width:114px !important;
}
select.editable-input{
width: 114px;
}
JavaScript
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
name: 'awesome user',
status: 2
};
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
$scope.showStatus = function() {
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};
});