Pass Angular object property through variable?

Question

Controller:

$scope.item = {"name": "b", "code": 3}
$scope.foo = "name";

How to access {{item.name}} through 'foo'?

This doesn't work:

HTML:

{{item.{{foo}}}}

plvice · Accepted Answer · 2018-07-20 14:22:14Z

1

Try this template HTML:

{{item[foo]}}

answered Jul 20, 2018 at 14:22

plvice

4582 silver badges11 bronze badges

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

Comments

Ankit Agarwal · Accepted Answer · 2018-07-20 14:25:15Z

0

Use square brackets to access the value of variable as a key of object. You are nesting the angular expression {{}} within another which is incorrect to access the value of key of the object.

angular.module('myApp', []).controller('personCtrl', function($scope) {
   $scope.item = {"name": "b", "code": 3}
   $scope.foo = "name";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personCtrl">

  <p>{{item[foo]}}</p>

</div>

edited Jul 20, 2018 at 14:25

answered Jul 20, 2018 at 14:20

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

2 Comments

plvice Over a year ago

He doesn't need item.foo, but item[foo] which is evaluated to item["name"].

Ankit Agarwal Over a year ago

@plvice oh yes. My bad

Collectives™ on Stack Overflow

Pass Angular object property through variable?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related