Behnam Azimi Behnam Azimi - 3 years ago 56
AngularJS Question

Is it possible to bind an object elements according to the value of a variable in angularjs

Suppose that I have an object like this:

var myObj = {

I also have another variable (e.g:
) that could get values like
and so on.

I want to bind the object elements in my view. Is there any way to bind that according to the value of my variable? A solution like below:


Answer Source

Assuming that both variables are declared on your scope, yes, you can do it using javascript bracket notation like so:

$scope.myObj = {
    item1: {},
    item2: {},
    item3: {},

$scope.itemHolder = 'item1';

Then you can interpolate the value like below:

{{ myObj[itemHolder] }} // {}

Working snippet:

angular.module('myApp', [])
  .controller('AppController', function($scope) {

    $scope.myObj = {
      item1: { a: 1 },
      item2: { b: 2 },
      item3: { c: 3 }

    $scope.itemHolder = 'item1';

<div ng-app="myApp" ng-controller="AppController">
  Type the prop name<br>
  <input type="text" ng-model="itemHolder"><br>
  {{ myObj[itemHolder] }}
<script src=""></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download