Is it possible to use ng-repeat over a value in a mdt-custom-cell?

[lmolema]

Hi, I have searched in the issuelist, but I couldn't find an answer for my question if I'm correct. In case the data in the nutrition example would be like this:

nutritionList = [
  {
    id: 601,
    ...
    fat: [
      {
        label: 'saturated',
        amount: 6.0
      },
      {
        label: 'unsaturated',
        amount: 2,3
      }
    ]
  },
  { ... } // more nutrition objects with a fat array with objects inside
];

I want to do something like this:

<mdt-custom-cell column-key="fat">
  <ul ng-repeat="type in value">
    <li>{{ type.label }}: {{ type.amount }}</li>
  </ul>
</mdt-custom-cell>

But this doesn't work. It seems it is not possible to use a ng-repeat in a mdt-custom-cell, is that correct? And if not, is what I want in any other way possible or shouldn't I using mdDataTable in this particularly case?

[tonipenya]

Found the same issue. It looks like it is not possible. When I type this:

<mdt-custom-cell column-key="atcs">
    <span ng-init="arr = [1,2,3]">
        array: {{ arr }},
        length: {{ arr.length }},
        element0: {{ arr[0] }},
        element1: {{ arr[1] }},
        element2: {{ arr[2] }},
        ng-repeat:<span ng-repeat="x in arr">{{x}}</span>.
    </span>
</mdt-custom-cell>

I get this:

array: [1,2,3], length: 3, element0: 1, element1: 2, element2: 3, ng-repeat:.

My current (naive) workaround is to feed the array to a filter like so:

{{ arr | joinArray }}

.filter('joinArray', function() {
    return function(arr) {
        return arr.join(' ');
    }
})

This covers my use case (which is simpler than yours). If you where to add those ul and li in the filter you'll probably have to tell angular not to scape html (which is sort of unsafe).

[johannesvaltonen]

I am having the same issue, too. If you are working with Angular 1.5+ and components, as a workaround you can wrap the repeater code inside a separate component. That seems to work.

Example:

<mdt-custom-cell column-key="fat">
  <fat-types types="value" />  
</mdt-custom-cell>

And in your custom fat types component:

<ul ng-repeat="type in $ctrl.types">
  <li>{{ type.label }}: {{ type.amount }}</li>
</ul>

[rvt]

Here is my ME TO! workaround. I made a directive to give me more flexebility:.

Simpel directive without isolated scope

        .directive('mdDataTableRenderer', [function () {
            return {
                restrict: 'E',
                templateUrl: function ($element, $attrs) {
                    return $attrs.templateUrl ? $attrs.templateUrl : 'mdDataTableRenderer.html';
                },
            };
        }])

Custom cell that uses the directive to initiate rendering

        <mdt-custom-cell column-key="emails">
                <md-data-table-renderer template-url="emailsRender.html"></md-data-table-renderer>
        </mdt-custom-cell>

Template that actually does the rendering

    <script type="text/ng-template" id="-emailsRender.html">
        <div md-colors="{color: 'primary-500'}" ng-repeat="item in value track by item.user_id" value="{{item.user_id}}">
            {{item.user_email}}<br/>
        </div>
    </script>

[npross]

Thanks @rvt. Just what I was looking for.

[argsno]

@rvt Great