mdt-column and mdt-cell not able to handle complex ng-repeat

I found two issues with ng-repeat in mdt-column and mdt-cell. They seem very related, so I put them into one ticket. Both are a bit related to https://github.com/iamisti/mdDataTable/issues/68, but a different case though, therefore opening a new ticket. I took the Demo table and wanted to replace the static column names with dynamic ones.

(1) mdt-column and ng-repeat

I added this to the controller:

$scope.columns = [];
$scope.columns["nutritions"] = [
          {"title":"Dessert (100g serving)", "field":"name", "sortable":true}, 
          {"title":"Calories", "field":"calories", "sortable":true},
          {"title":"Fat (g)", "field":"fat", "sortable":true},
          {"title":"Carbs (g)", "field":"carbs", "sortable":true},
          {"title":"Protein (g)", "field":"protein", "sortable":true},
          {"title":"Sodium (mg)", "field":"sodium", "sortable":true},
          {"title":"Calcium (%)", "field":"calcium", "sortable":true},
          {"title":"Iron (%)", "field":"iron", "sortable":true}       
] 

and with this in html code, it works:

<mdt-column align-rule="left" ng-repeat="column in columns['nutritions']">{{column.title}}</mdt-column>

but as soon as I add another reference field into the mdt-column tag body, it fails, i.e.:

<mdt-column align-rule="left" ng-repeat="column in columns['nutritions']">{{column.title}} / {{column.field}}</mdt-column>

The header is not shown at all anymore.

CodePen for this example: http://codepen.io/mathiasconradt/pen/ZQNrvM

(2) mdt-cell and ng-repeat

The other issue is when I also try to handle the mdt-cell fields dynamically via ng-repeat.

Based on above code base:

<mdt-cell ng-repeat="column in columns['nutritions']">{{nutrition[column.field]}}</mdt-cell>  

The data values are not shown at all.

CodePen for this example: http://codepen.io/mathiasconradt/pen/OMYQdj

Both ng-repeat code samples work fine when used with just a <div>-tag, but not with mdt-cell or mdt-column.

[Gaglia88]

Hi, I solved the problem in my case… In the md-data-table.js on line 875 there is this assignment: var cellValue = $parse(clone.html().replace('{{', '').replace('}}', ''))($scope.$parent);

How you can see it evaluates the function that you put in the mdt-cell using the scope of it’s parent (mdt-row), thus it uses the scope of the row and it cannot find the variable ‘column’…

So, If you modify the code in this way var cellValue = $parse(clone.html().replace('{{', '').replace('}}', ''))($scope); it uses the right scope and it able to read the ‘column’ variable.

[yghelmut]

Found a quick fix:

var content = clone.html() ? clone.html() : clone.text(); var cellValue = $interpolate(clone.html())($scope.$parent);