Change the button text on edit.

[altaf-sami]

Hi,

Here is the code script:
http://jsfiddle.net/NfPcH/652/

I want that when "Edit" button is clicked then show text box in edit mode and change the button text from "Edit" to "Update", and i want that when i click on "Update" then data in text box should be submitted.

Thanks.

[drtobal]

mmm...
for large forms, maybe it's better if you use multiple views, one for show, and another for edit, and a button to toggle views.
or maybe (i'm not sure if it's recommendable) have a variable for state (editing or viewing)

[altaf-sami]

i don't have large form, i have one editable textbox and want then when edit is clicked then label should be editable as it is working fine in http://jsfiddle.net/NfPcH/652/, how i can change text of button to 'Update' when it is in edit mode.

[drtobal]

here's a fiddle with a improvisation http://jsfiddle.net/NfPcH/662/

[drtobal]

or can be better this one http://jsfiddle.net/NfPcH/663/ with a filter, for all your inputs

[altaf-sami]

Great, thanks for help. On update button click i want to save value in database, How this can be achieved? i means which event will work?

[drtobal]

if you want to save to a db, yo have to do in controller, i think this is a good way http://jsfiddle.net/NfPcH/664/

[altaf-sami]

Thanks, You have saved my day, I will will add jquery ajax method to save server side, Many Many thanks.

[drtobal]

check this for ajax calls with angular http://docs.angularjs.org/api/ng.$http
I do not recommend using jQuery ajax inside a angular controller or you will have a very heavy headache.
use jQuery only for directives, for dom manipulation only

[altaf-sami]

Thanks i will look into this and will use this.

[altaf-sami]

One more thing, how i can get the value of textbox in save method?

[drtobal]

here you have a fiddle http://jsfiddle.net/NfPcH/665/

you may call the same object that you give to input, in this case $scope.user.name,
i saw something very important, for don't call the textBtnForm.$show() on the button, you have to return true on the $scope.save() function, like an if statement.

on the http://jsfiddle.net/NfPcH/664/, the $scope.textBtnForm.hide(); thows an error, i don't see that, but returning true would be ok.

if you don't return true, it triggers the textBtnForm.$show() of the button, and show again the textbox, on the jsfiddle 664 this don't triggers becouse the error stop the execution, but is bad.

regards

[btford]

This type of question/discussion might be better serviced on StackOverflow. I'm going to close this since it's not an issue with Angular.

[altaf-sami]

Thanks @drtobal

[drtobal]

you're welcome, you can email me if you have more questions