(ˢᵒᶜⁱᵉᵗʸlog)
(ˢᵒᶜⁱᵉᵗʸserver)
(ˢᵒᶜⁱᵉᵗʸtask)
Chandler
REST
angular.js
coding-for-fun
cordova
css
hackerspace
installation
javascript
mockups
multi-language
nReduce
pike
publishing
retreat
sTeam
stylesheets
user-interface
virtual hosting
xiamen

edit-in-place with angular.js
(ˢᵒᶜⁱᵉᵗʸtask) | angular.js | nReduce

The idea of editing-in-place is that the user clicks on a text and that text changes into an input field or text area that can be edited and saved. There are various solutions that involve plugins for jquery or a javascript function to replace the text node with an input field and annotating that text field with a class or an onClick event to activate the custom code.

angular.js doesn't have custom support for edit-in-place, nor are there any plugins. Instead a solution can be built with the means already provided. Just place the text node and the input field next to each other and then use the ng-show and ng-hide directives to display one and hide the other. Both directives check a variable with can be set using a function called from ng-click or any other ways used to trigger the edit mode. It doesn't get simpler than that.

Didn't manage to confirm any users yet, but will continue to work on that. In the meantime i'll think about a landingpage for them to go to. And hopefully the jump issues when editing can be fixed too.

Author : mbaehr   |   size : 1285Bytes   |   Publish Date : Oct/3/12/17:15   |   to Top