My function in my controller works but does not update the view (Angularjs)

Question

I've some fields, they can be edited. The user can cancel the edition mode with the button 'Cancel':

<button ng-click="cancelEdit();" ng-show="editable">
    <i class="fa fa-remove"></i> Cancel
</button>

The event ng-click call the function cancelEdit().

$scope.cancelEdit = function(){
    $scope.editable=false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

In this function, I just want to set the boolean variable for edition mode to false and reinit the values of my inputs to the default value (before edition mode). After this function is calling, the values are updated for the controller, but not in my view:

<button ng-click="editable=true;" ng-show="!editable">
    <i class="fa fa-edit"></i> Edit
</button>

This button is shown when the variable editable is set to false. So when I click on the cancel button, theoretically, the button Edit must be shown and my inputs should be updated. Why is this not the case ?

Could you show how are you binding $scope.jobNameInput and the other values in the view? What's the vaue of $scope.jobToView.name? If you could make a snipped or a plnkr, that would be great. So we can assist you better. — lealceldeiro
– lealceldeiro, Commented Jan 19, 2017 at 13:48
mmm try so set ng-click="editable=true;" not in the button but with a function .. so ng-click="setEditTrue()" and then $scope.setEditTrue= function(){ $scope.editable=true; } — federico scamuzzi
– federico scamuzzi, Commented Jan 19, 2017 at 13:48
Try to replace the editable variable to a property of an object, not as a property of the $scope, something like: buttonEditable = {value:true}; Then in your htlml: ng-click="buttonEditable.value=true" — Manu Obre
– Manu Obre, Commented Jan 19, 2017 at 14:04
When I tried to do the plunker, it worked. I think that it is a problem related to the fact that I display these inputs only if the user clicks on a button before using a ng-class (checked / !checked). An example of input: <input type="text" ng-model="jobCommentsInput" ng-value="jobToView.comments" ng-disabled="!editable" /> — K. Gaud
– K. Gaud, Commented Jan 19, 2017 at 15:09

korteee · Accepted Answer · 2017-01-19 15:19:52Z

1

Primitives are immutable – i.e. its value cannot be changed by invoking functions on it.

Your $scope.editable is a boolean variable which is primitive. That's why the view does not get updated. Its value gets changed only in the closure of your function.

To apply it in your view you should change it to a non primitive value. This could be done if you set it as a property of an object.

E.g.

$scope.isEditable = {
  value:false
}

Then play around with that object. In your case:

Cancel button:

<button ng-click="cancelEdit();" ng-show="isEditable.value">
    <i class="fa fa-remove"></i> Cancel
</button>

Edit button:

<button ng-click="isEditable.value=true;" ng-show="!isEditable.value">
    <i class="fa fa-edit"></i> Edit
</button>

Function:

$scope.cancelEdit = function(){
    $scope.isEditable.value = false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

answered Jan 19, 2017 at 15:19

korteee

2,7122 gold badges21 silver badges25 bronze badges

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

3 Comments

K. Gaud Over a year ago

Thanks ! I did not know that the primitive types were not updatable. And in terms of input, do you have any idea? Because, in this case, I use the jobToView object.

korteee Over a year ago

You could follow the same strategy. e.g. job = {name:"", priority:"", comments:""}. Then use this object properties in the view.

K. Gaud Over a year ago

I already use my jobToView object in my view. But when I step through my cancelEdit function, the value of my input is already equal to my default value. As if he does not see the changes I made the time they were edited. While having the display, after having passed my function, it keeps the modifications that I made.

K. Gaud · Accepted Answer · 2017-01-19 16:15:48Z

0

Thanks to Korte for the answer on the boolean variable. To complete, with regard to the inputs, I found the answer to my question. Simply declare in the controller:var vm = this;;

And simply, in the model of the input, write: ng-model="vm.jobCommentsInput"

I think so the inputs are considered as my boolean variable and they needs to be objects.

answered Jan 19, 2017 at 16:15

K. Gaud

33 bronze badges

Collectives™ on Stack Overflow

My function in my controller works but does not update the view (Angularjs)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related