Bind normal js variable as an angular object key

Question

I have an array of objects, objects, and a a few JS variables holding static strings, such as static1, static2 ... How can I accomplish the following:

<tr ng-repeat="obj in objects">
    <td>{{obj[static1]}}</td> 
    <td>{{obj[static2]}}</td> 
    ...
</tr>

EDIT: static1 and static2 are JS variables, ie. var static1 = "something"

static1 will be json key right

Nidhish Krishnan
– Nidhish Krishnan

2014-05-15 15:39:26 +00:00
Commented May 15, 2014 at 15:39 — Nidhish Krishnan
– Nidhish Krishnan, Commented May 15, 2014 at 15:39

Kos Prov · Accepted Answer · 2014-05-15 15:45:25Z

1

In the controller where you define $scope.objects, also define:

$scope.static1 = 'nameOfObjectProperty1';
$scope.static2 = 'nameOfObjectProperty2';

and it should evaluate correctly.

answered May 15, 2014 at 15:45

Kos Prov

4,3031 gold badge21 silver badges14 bronze badges

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

4 Comments

anvarik Over a year ago

static1 and static2 are normal variables, not angularjs scope variables

Kos Prov Over a year ago

everything you put in expressions like obj[static1] has to be on the angular scope. obj is (ng-repeat puts it). It's how angular works.

anvarik Over a year ago

apparently its the only way to go... I thought there might be a trick or so

Sathya R Over a year ago

will change to any object dynamically reflect? say, obj[static1] is changed on certain onclick function

Nidhish Krishnan · Accepted Answer · 2014-05-15 15:42:15Z

Are you looking for something like this

Working Code

html

<div ng-app='myApp' ng-controller="ArrayController">
    <table border="1">
     <th ng-repeat="header in headers"> <b>{{ headers[$index]}}</b></th>
     <tr ng-repeat="arr in records">
        <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]">
        </td>
     </tr>
    </table>
</div>

script

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.headers = ['static1', 'static2'];
    $scope.records = [{
        static1: 'a1',
        static2: 'd1'
    }, {
        static1: 'c2',
        static2: 'A2'
    }, {
        static1: 'b3',
        col2: 'c3'
    }, {
        static1: 'd4',
        static2: 'a1'
    }, {
        static1: '11',
        static2: '22'
    }, {
        static1: 'E1',
        static2: 'E2'
    }];
});

Collectives™ on Stack Overflow

Bind normal js variable as an angular object key

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related