Last Updated: February 25, 2016
·
797
· rogeriolino

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/