Angularjs dynamically accessing scope objects

Question

I have a directive that builds out a table. I'm trying to make it as reusable as possible, so I thought allowing users to specify the columns and fields would be useful. So I have this in my controller that I pass to my directive:

$scope.columns = [
        {
            title:'User Name',
            value:'UserName'
        },
        {
            title:'First Name',
            value:'FirstName'
        },
        {
            title:'LastName',
            value:'LastName',
        },
        {
            title:'Email',
            value:'Email'
        }];

My directive uses a template that looks like this:

<table>
    <tr>
        <th ng-repeat="column in columns">{{column.title}}</th>
    </tr>
    <tr ng-repeat="user in users" ng-class="getClass(user)" ng-click="selectUser(user,$event,$index)" ng-dblclick="details(user)">
        <td ng-click="selectUser(user)">{{user.UserName}}</td>
        <td>{{user.FirstName}}</td>
        <td>{{user.LastName}}</td>
        <td>{{user.Email}}</td>
    </tr>
</table>

the question: can I do something like {{user.{{column.value}}}} to dynamically specify what property of user I want to put in that cell?

Andyrooger · Accepted Answer · 2013-10-21 20:37:13Z

1

You should be able to use

{{user[column.value]}}

to do this like you would in normal JS.

You won't be able to nest interpolation though.

answered Oct 21, 2013 at 20:37

Andyrooger

6,7461 gold badge45 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Angularjs dynamically accessing scope objects

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related