How to properly update a scope variable if it's being passed as a parameter

Question

I'm trying to pass a scoped object property into a function in my controller and then change its value to either true or false depending on the current value. Then I want this value to be updated in the scope at the same time.

The problem that occurs is that I can't just use $scope.isBeingEdited in the function to update the scope, because it's present in an ng-repeat so it wouldn't know which one to update. And just setting the value of the parameter doesn't seem to update the scope.

I read this question which seems to state that this is not possible? Maybe I read it wrong but surely there must be a rather simple way of achieving this? This is causing me problems on more than one front so it's time that I solve this issue.

Here's a dumb version of my markup, containg a title, an input and an edit "button":

<div ng-repeat="bodypart in body">
  <h3 ng-hide="bodypart.isBeingEdited" ng-bind="bodypart.name"></h3>
  <input ng-show="bodypart.isBeingEdited">
  <span ng-click="setEditState(bodypart.isBeingEdited)">Edit</span>
</div>

When I click on "edit" then this should run, passing bodypart.isBeingEdited as the variable to do a value check for:

$scope.setEditState = function(item) {

  // Check if item is true or false
  // and set it accordingly
  item ? item = false : item = true;
}

How can I ensure that the scoped variable that gets passed to this function gets updated when item gets updated?

score 2 · Accepted Answer · answered Jul 07 '15 at 19:28

2

You can pass item instead of property isBeingEdited and use it in code accordingly:

<span ng-click="setEditState(bodypart)">Edit</span>

Controller

$scope.setEditState = function(item) {
  item.isBeingEdited = !item.isBeingEdited;
}

answered Jul 07 '15 at 19:28

dotnetom

24,551
9
51
54

Would this solution also work if setting it from inside a resolve or reject function? – Chrillewoodz Jul 07 '15 at 19:29
@Chrillewoodz I don't see a reason why it should not work – dotnetom Jul 07 '15 at 19:31
Well your solution worked for the case asked in this question at least so I'll accept it, cheerios. – Chrillewoodz Jul 07 '15 at 19:33

score 0 · Answer 2 · answered Jul 07 '15 at 19:33

0

Since objects are passed by reference, you should be able to do something like this.

<div ng-repeat="bodypart in body">
  <h3 ng-hide="bodypart.isBeingEdited" ng-bind="bodypart.name"></h3>
  <input ng-show="bodypart.isBeingEdited">
  <span ng-click="toggleBodyPartState(bodypart)">Edit</span>
</div>

$scope.toggleBodyPartState = function(bodyPart) {
    bodyPart.isBeingEdited = !bodyPart.isBeingEdited;
}

answered Jul 07 '15 at 19:33

Travis

5,021
2
28
37

I didn't copy anyone. Perhaps our answers are similar because it was an easy question to answer. Let me give you a small piece of advice: When you don't know something, ask a question, and a stranger takes time out of his lunch break to help you, don't insult that person. If you want to be that person, spend more time reading angular docs and learning javascript, and less time asking this community for help and then insulting them when they do. – Travis Jul 08 '15 at 05:24
Then I got a tip for you, read the given answers before posting your own. Or you're most likely get pointed out for copying someone else, and the fact that you downvoted the question because I pointed this out is just immature behavior. – Chrillewoodz Jul 08 '15 at 08:32
1. I down voted the question because your comments violates the [behavior expected of all users](http://stackoverflow.com/help/behavior). 2. When I started answering the question dotnetom's answer didn't exist. There's no policy about verifying someone didn't write a similar answer to yours while you're writing it. but there is one about treating people with respect. – Travis Jul 08 '15 at 08:43

How to properly update a scope variable if it's being passed as a parameter

2 Answers2