Menu
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:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> document.write('<base href="' + document.location + '" />'); </script> <script src="app.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-app="birthdayToDo" ng-controller="main"> <div id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Birthday Reminders</h1> </div> <ul ng-repeat="bday in bdays"> <li>{{bday.name}} | {{bday.date}}</li> </ul> <form ng-show="visible" ng-submit="newBirthday()"> <label>Name:</label> <input type="text" ng-model="bdayname" placeholder="Name" ng-required/> <label>Date:</label> <input type="date" ng-model="bdaydate" placeholder="Date" ng-required/> <br/> <button class="btn" type="submit">Save</button> </form> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a> </div> </div> </body> 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 = ''; }; }); 
968
Solution. Let users edit values in the same place as they are displayed. Provide an easy way to let users edit parts of a page without having to be redirected to an edit page. Typically, hover effects are used to invite editing. The Inplace Editor pattern allows for localized editing of elements on the fly.
Page Edit is an extension that let you make changes to any HTML webpage. To work with this add-on, simply open the toolbar popup UI and then click on the big toggle button at the left side.
Log in, click Edit, and edit this page. Log in, click Discuss, update the Page status value, and suggest an improvement.
You should put the form inside each node and use ng-show and ng-hide to enable and disable editing, respectively. Something like this:
<li> <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span> <form ng-show="editing" ng-submit="editing = false"> <label>Name:</label> <input type="text" ng-model="bday.name" placeholder="Name" ng-required/> <label>Date:</label> <input type="date" ng-model="bday.date" placeholder="Date" ng-required/> <br/> <button class="btn" type="submit">Save</button> </form> </li> The key points here are:
ng-model to the local scopeng-show to form so we can show it while editingspan with a ng-hide to hide the content while editingng-click, that could be in any other element, that toggles editing to true ng-submit to toggle editing to false Here is your updated Plunker.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
