Editable textbox on click, angular.js

Problem

in my project I have a list of project names and I'd like to edit the names with dynamic textboxes using angular.js. I'd like the textboxes of my projects names to become editable if I click on a button next to my project titles, and confirm the edition with another button when I'm done typing. Can I do such thing with angular.js ? I just finished the tutorial and am quite noob with it.

Problem courtesy of: Nepho

Solution

Actualy it is one of my most favorite example when I am doing AngularJS presentations to public :)

There is a code without single line of JS code: http://plnkr.co/edit/ZwYA6R2e6kdhHBJAYf3V?p=preview

  <span ng-hide="editing">
    {{name}} <button ng-click="editing = true">Edit</button>
  </span>
  <span ng-show="editing">
    <input type="text" ng-model="name"> 
    <button ng-click="editing = false">Save</button>
  </span>
Solution courtesy of: Valentyn Shybanov

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.