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?

Answer 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.