Angular JS how to update scope variable inside another scope variable

Question

I am bulding a list using ng-repeat from array of objects. One of the property in array is a boolean that will go in ng-show of each element I am building using this array. Array itself is a scope variable too.

Now I want to update display property only. Is it possible?

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.displayThird = false;

  $scope.list = [
    {
      text: "One",
      display: true
    },
    {
      text: "Two",
      display: true
    },
    {
      text: "Three",
      display: $scope.displayThird
    },
    {
      text: "Four",
      display: true
    }
  ];

  /* I want this function to update my display property */
  $scope.display = function() {
    $scope.displayThird = true;
  }
});

http://plnkr.co/edit/kF1M1fWyeCcrfcUY3Aqu?p=preview

is this what you are trying to do? plnkr.co/edit/1S4AWMQ1gLUr9li03Xje?p=preview — charlietfl
– charlietfl, Commented Nov 17, 2013 at 13:41
@charlietfl - yes, ultimately this is what I wanted to achieve. But I wanted something where I don't need to specify array index, incase I don't know it. Nikos' answer helped me realise why I couldn't do it the way I wanted. — Yuri
– Yuri, Commented Nov 17, 2013 at 13:55
you can pass in the specific item also, then get it's index from within controller. var idx= $scope.list.indexOf(item) — charlietfl
– charlietfl, Commented Nov 17, 2013 at 14:12

Nikos Paraskevopoulos · Accepted Answer · 2013-11-17 13:36:33Z

1

This is a common misconception: When you assign an expression to a variable in Javascript, only the value of the expression gets assigned. No binding gets created. On the contrary, expressions in Angular templates do create bindings.

Therefore in your case the $scope.list[2].display gets assigned the value false and knows nothing how this value was created.

The correct way to do this in Angular is with a watch:

$scope.$watch("displayThird", function(newval) {
    $scope.list[2].display = newval;
});

This is what Angular does under the hoods with its templates, only you have to do it manually in Javascript.

answered Nov 17, 2013 at 13:36

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

1 Comment

Yuri Over a year ago

Thanks very much. I was hoping there's some secret angular method to let it know that this is a scope variable to watch. Thanks for a quick response.

Collectives™ on Stack Overflow

Angular JS how to update scope variable inside another scope variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related