Editable input text fields in AngularJs do not reset

Question

I'm trying to edit a forms input text field. So the value is loaded from the API and then if you press edit button you can change the value and either cancel the changes or update with the new value you just entered. I try to to store the pre-edited value in a local variable so that I can be able to cancel the changes. Here is my code in the controller.

$scope.preEditFirstName = {};

$scope.edit = function(model) {
    // Copy preedited data locally
    $scope.preEditFirstName = angular.copy(model);
}

$scope.cancelEdit = function(model){
    $scope.model = angular.copy($scope.preEditFirstName);
    console.log($scope.model); //Correct result!
};

And here is the view

<div ng-show="beforeFirstNameEdit">
    {{accountData.firstname || "Loading..."}}
</div>
<div ng-show="!beforeFirstNameEdit">
    <input name="firstName" ng-model="accountData.firstname"  placeholder="First Name" type="text" />
</div>

<div ng-show="beforeFirstNameEdit">
    <button type="button" ng-click="beforeFirstNameEdit = false; edit(accountData.firstname)">Edit</button>
</div>

<div ng-show="!beforeFirstNameEdit">
    <button type="button" ng-click="beforeFirstNameEdit = true; update(accountData.firstname)">Save</button>

    <button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit(accountData.firstname)">Cancel</button>
</div>

At first you just see an "edit" button and when you press it the buttons save and cancel appear. So even if the local variable is correctly saved, when I press the cancel button the field does not show its pre-edit text. How can I fix this?

Avinash · Accepted Answer · 2016-01-30 21:30:08Z

1

In cancelEdit use $scope.accountData.firstname instead of $scope.model

To make it reusable: View:

<button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit('firstname')">Cancel</button>

Controller:

$scope.cancelEdit = function(model){
    $scope.accountData[model] = angular.copy($scope.preEditFirstName);
};

So now cancelEdit will work for all models starting with accountData.*

edited Jan 30, 2016 at 21:30

answered Jan 30, 2016 at 21:00

Avinash

8328 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dimitrios Vythoulkas Over a year ago

It's the same thing. The function takes the model as an argument.

Avinash Over a year ago

But you are passing model as argument and updating $scope.model.

Avinash Over a year ago

Either do $scope[model] = angular.copy... $scope object doesn't have model property.

Dimitrios Vythoulkas Over a year ago

if the model is accountData.firstname isn't this passed to the cancelEdit() function so in this function $scope.model is the same as $scope.accountData.firstname?

Avinash Over a year ago

From view you are passing the value of accountData.firstName , but in your function you are expecting it to be property name of scope object?

|

Collectives™ on Stack Overflow

Editable input text fields in AngularJs do not reset

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related