Edit In Place Content Editing

Question

When using ng-repeat what is the best way to be able to edit content   In my ideal situation the added birthday would be a hyperlink  when this is tapped it will show an edit form - just the same as the current add form with an update button   Live Preview  Plunker   HTML    lt  DOCTYPE html gt   lt html gt     lt head lang  en  gt       lt meta charset  utf-8  gt       lt title gt Custom Plunker lt  title gt       lt script src    ajax googleapis com ajax libs angularjs 1 0 3 angular min js  gt  lt  script gt       lt script gt        document write   lt base href      document location        gt          lt  script gt       lt script src  app js  gt  lt  script gt       lt link href    netdna bootstrapcdn com twitter-bootstrap 2 2 0 css bootstrap-combined min css      rel  stylesheet  gt     lt  head gt   lt body ng-app  birthdayToDo  ng-controller  main  gt       lt div id  wrap  gt          lt  -- Begin page content -- gt         lt div class  container  gt           lt div class  page-header  gt             lt h1 gt Birthday Reminders lt  h1 gt           lt  div gt               lt ul ng-repeat  bday in bdays  gt                   lt li gt   bday name       bday date   lt  li gt               lt  ul gt               lt form ng-show  visible  ng-submit  newBirthday    gt               lt label gt Name  lt  label gt               lt input type  text  ng-model  bdayname  placeholder  Name  ng-required  gt               lt label gt Date  lt  label gt               lt input type  date  ng-model  bdaydate  placeholder  Date  ng-required  gt               lt br  gt               lt button class  btn  type  submit  gt Save lt  button gt           lt  form gt         lt  div gt          lt div id  push  gt  lt  div gt       lt  div gt        lt div id  footer  gt         lt div class  container  gt           lt a class  btn  ng-click  visible   true  gt  lt i class  icon-plus  gt  lt  i gt Add lt  a gt         lt  div gt       lt  div gt       lt  body gt    App js   var app   angular module  birthdayToDo         app controller  main   function  scope            Start as not visible but when button is tapped it will show as true            scope visible   false          Create the array to hold the list of Birthdays           scope bdays               Create the function to push the data into the  bdays  array       scope newBirthday   function              scope bdays push  name  scope bdayname  date  scope bdaydate              scope bdayname                scope bdaydate

User · Answer

Since this is a common piece of functionality it s a good idea to write a directive for this  In fact  someone already did that and open sourced it  I used editablespan library in one of my projects and it worked perfectly  highly recommended

User · Answer

I was looking for a inline editing solution and I found a plunker that seemed promising  but it didn t work for me out of the box  After some tinkering with the code I got it working  Kudos to the person who made the initial effort to code this piece   The example is available here http   plnkr co edit EsW7mV p preview  Here goes the code   app controller  MainCtrl   function  scope        scope updateTodo   function indx        console log indx            scope cancelEdit   function value        console log  Canceled editing   value            scope todos          id 123  title   Lord of the things         id 321  title   Hoovering heights         id 231  title   Watership brown                On esc event app directive  onEsc   function       return function scope  elm  attr        elm bind  keydown   function e          if  e keyCode     27            scope  apply attr onEsc                                On enter event app directive  onEnter   function       return function scope  elm  attr        elm bind  keypress   function e          if  e keyCode     13            scope  apply attr onEnter                                Inline edit directive app directive  inlineEdit   function  timeout      return       scope          model    inlineEdit         handleSave    amp onSave         handleCancel    amp onCancel             link  function scope  elm  attr          var previousValue         scope edit   function             scope editMode   true          previousValue   scope model            timeout function               elm find  input   0  focus               0  false                  scope save   function             scope editMode   false          scope handleSave  value  scope model                   scope cancel   function             scope editMode   false          scope model   previousValue          scope handleCancel  value  scope model                        templateUrl   inline-edit html             Directive template    lt div gt     lt input type  text  on-enter  save    on-esc  cancel    ng-model  model  ng-show  editMode  gt     lt button ng-click  cancel    ng-show  editMode  gt cancel lt  button gt     lt button ng-click  save    ng-show  editMode  gt save lt  button gt     lt span ng-mouseenter  showEdit   true  ng-mouseleave  showEdit   false  gt       lt span ng-hide  editMode  ng-click  edit    gt   model   lt  span gt       lt a ng-show  showEdit  ng-click  edit    gt edit lt  a gt     lt  span gt   lt  div gt    To use it just add water    lt div ng-repeat  todo in todos        inline-edit  todo title        on-save  updateTodo  index         on-cancel  cancelEdit todo title   gt  lt  div gt    UPDATE   Another option is to use the readymade Xeditable for AngularJS    http   vitalets github io angular-xeditable

User · Answer

I ve modified your plunker to get it working via angular-xeditable   http   plnkr co edit xUDrOS p preview  It is common solution for inline editing - you creale hyperlinks with editable-text directive that toggles into  lt input type  text  gt  tag    lt a href     editable-text  bday name  ng-click  myform  show    e-placeholder  Name  gt        bday name     empty     lt  a gt    For date I used editable-date directive that toggles into html5  lt input type  date  gt

User · Answer

You should put the form inside each node and use ng-show and ng-hide to enable and disable editing  respectively  Something like this    lt li gt     lt span ng-hide  editing  ng-click  editing   true  gt   bday name       bday date   lt  span gt     lt form ng-show  editing  ng-submit  editing   false  gt       lt label gt Name  lt  label gt       lt input type  text  ng-model  bday name  placeholder  Name  ng-required  gt       lt label gt Date  lt  label gt       lt input type  date  ng-model  bday date  placeholder  Date  ng-required  gt       lt br  gt       lt button class  btn  type  submit  gt Save lt  button gt      lt  form gt    lt  li gt    The key points here are    I ve changed controls ng-model to the local scope Added ng-show to form so we can show it while editing Added a span with a ng-hide to hide the content while editing Added a ng-click  that could be in any other element  that toggles editing to true Changed ng-submit to toggle editing to false   Here is your updated Plunker

[html] Edit In Place Content Editing

Examples related to html

Examples related to angularjs

Examples related to edit