Angular.js: Inplace editing
HTML
<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">{{todo.text}}</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
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 = '';
}
}
});
http://rogeriolino.com/2013/12/12/angular-js-inplace-editing/
Written by Rogério Alencar Lino Filho
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#