AngularJS assigning scope variable from scope

Question

In angularJS, when trying to assign a scope variable from the value of another scope variable, the value of the derived variable is empty. In the example, I'd like to have a scope reference for the car, and also for a specific car part (which may change later in the application).

Example:

$scope.car = Car.get(); //async http service that returns a JSON car object
$scope.selectedCarPart =  $scope.car.brakes;

HTML:

<div>{{car.engine}} - {{selectedCarPart}}</div>

Output:

v8 -

Why is selectedCarPart empty?

Preview · Accepted Answer · 2014-05-29 19:09:01Z

1

I assume that you get call is async, so when you assign the selectedCarPart, your $scope.car is currently null and doesn't have yet some brakes.

You have to wait the end of your get call and assign the value of the resulting JSON car object in the success callback of your http service.

answered May 29, 2014 at 19:09

Preview

35.9k10 gold badges95 silver badges113 bronze badges

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

3 Comments

samson Over a year ago

shouldn't there be an error here as well? like 'undefined has no property named brakes' or some such?

Preview Over a year ago

Yep, he maybe hasn't checked his console.

Marcos Savoury Over a year ago

@Aperçu thanks, you put me on the right track. The get method accepts a callback to be executed upon completion of the request.

Mirek Surma · Accepted Answer · 2014-05-29 19:52:27Z

0

Accepted answer from Apercu is correct. You can also use more general solution which is using $watch. In that case you write this:

$scope.$watch('car',function(newValue) {
  $scope.selectedCarPart = newValue['brakes'];
}, true);

More information about $watch can be found here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

answered May 29, 2014 at 19:52

Mirek Surma

1481 silver badge10 bronze badges

Comments

samson · Accepted Answer · 2014-05-29 20:17:41Z

0

Even if that would work, I think there's a better way.

<div>{{car.engine}} - {{car[selectedPartKey]}}</div>

That way, you can just change the value of selectedPartKey to 'brakes'. Your way, if car's values change, it won't be reflected...

edited May 29, 2014 at 20:17

answered May 29, 2014 at 19:24

samson

1,15212 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS assigning scope variable from scope

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related