<!DOCTYPE html>
<html lang="en">
<head>
<title>X-Editable</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/js/xeditable.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="app">
<div class="container-fluid" ng-controller="Controller as ctrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in ctrl.users">
<td>
{{$index + 1}}
</td>
<td>
<a href="#" editable-text="user">
{{user}}
</a>
</td>
<td>
<div class="btn-group">
<span ng-click="ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-model="ctrl.addMe"/>
<button ng-click="ctrl.addUser()">Add</button>
<p id="errormessage">{{ctrl.errortext}}</p>
</div>
</body>
</html>
/* Styles go here */
angular.module('app', ['xeditable'])
.controller('Controller', function(){
this.users = [
"Jeff Atwood",
"Baktash",
"Stroustrup"
];
this.addUser = function(){
this.errortext="";
if(this.users.indexOf(this.addMe)==-1){
this.users.push(this.addMe);
}else{
this.errortext="The user does already exist!";
}
}
this.removeUser = function(user){
this.users.splice(user,1);
this.errortext = "";
}
});