<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<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.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h4>Angular-xeditable demo</h4>
<div ng-controller="Ctrl" style="margin: 50px">
<a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
<br><br>
<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
<br><br>
debug: {{ user | json }}
<h4>edit link not styled; not clickable when inside form </h4>
<form name="myForm" editable-form>
<br>
<a href="#" ng-click="$form.$show()" e-ng-blur="$form.$hide()" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
</form>
</div>
</body>
</html>
var app = angular.module("app", ["xeditable"]);
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';
};
});
/* Styles go here */