<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="AppCtrl">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items">
<label editable="doneEditing(item, $index)">{{ item }}</label>
</li>
</ul>
<pre>items: {{ items | json }}</pre>
</div>
</body>
</html>
angular.module('app', []);
angular.module('app').controller('AppCtrl', function($scope){
$scope.items = ['test', 'ceva', 'altceva', 'ceva separat'];
});
angular.module('app').directive('editable', function($window, $timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
elem.addClass('editable');
elem.on('click', function(){
var answer = $window.prompt('Editare', elem[0].innerHTML);
if(answer && answer.length > 0){
scope.$apply(function(){
var idx = scope.items.indexOf(scope.item);
scope.items[idx] = answer.trim();
});
}
});
}
};
});
.editable {
color: #428BCA;
cursor: pointer;
}
body {
padding-top: 20px;
}