Angular.js: Inplace Editing
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="container" ng-app="todo">
<div ng-controller="todoCtrl">
<form ng-submit="add()">
<input type="text" class="form-control" placeholder="New task..." ng-model="newTodo">
<button class="btn btn-primary">Add</button>
</form>
<ul>
<li ng-repeat="todo in todos">
<span ng-click="editing = true" ng-hide="editing"></span>
<span ng-show="editing">
<input type="text" class="form-control" ng-model="todo.text" ng-blur="editing = false" ng-required>
<a data-ng-click="editing = false" class="glyphicon glyphicon-ok"></a>
</span>
</li>
</ul>
</div>
</div>
|
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| var app = angular.module('todo', []);
app.controller('todoCtrl', function($scope) {
$scope.todos = [
{text: "First task"}
];
$scope.add = function() {
if ($scope.newTodo && $scope.newTodo != '') {
$scope.todos.push({
text: $scope.newTodo
});
$scope.newTodo = '';
}
}
});
|
JSFiddle demo