Access iteration variable instead of just value in custom-cell?

[alveflo]

Is it possible to access the "whole" iteration variable/object in a custom-cell instead of just the property value?

E.g. I want to access another property than "foo":

<mdt-custom-cell column-key="foo">
  <a href="/action" ng-show="iterationVariable.bar > 0">{{foo}}</a>
  <span>No action for {{foo}}</span>
</mdt-custom-cell>

I guess I could solve this easily by using ng-repeat to access the object, but it's not as neat as using the mdt-row 😄

Thanks in advance

[iamisti]

Yes it is, every variable on your scope will be names as clientScope, so you can access it by clientScope.myVariable

[iamisti]

Same as #166

[alveflo]

Yeah but the clientScope would refer to the $scope, right? I'm interested of accessing the iteration variable - say I'm iterating over users, then in my custom-cell I would like to access e.g. user.foo, user.bar, user.baz

Sorry for bad explanation...

[iamisti]

Ah I see... Didn't think about it before but it make sense, I can put that in.

[alveflo]

Sweet!

[iamisti]

It will be there latest tomorrow night! Will let you know here.

[nurhadijogja]

hi @iamisti ,, i have questions related this topic:

1. how to access the index of iteration? for example i need to create row autonumber then i need the row index (or is autonumber feature already exist?).
2. how to combine column-key values in one mdt-custom-cell? for example i need to combine name and email address in first column.

thank you.

[iamisti]

@nurhadijogja good questions.

1. you can access the id of the row if you defined. Check out the documentation about mdt-custom-cell. You'll find that row id is accessible by referring to rowId in mdt-custom-cell directive.
2. I think the best approach here is to use a mapper function in your end and create another property for each item in your collection/array, so that you'll precalculate what you need.

Given an example:

var nutritionList = [
    {
        id: 601,
        name: 'Frozen joghurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
        calcium: '14%',
        iron: '1%'
    },
    {
        id: 602,
        name: 'Ice cream sandwitch',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        sodium: 129,
        calcium: '84%',
        iron: '1%'
    }
];

//this is the result of array we expose to the scope
$scope.nutritionList = mapMyNutritions(nutritionList);

//this is our mapper
function mapMyNutritions(nutritionsArray){
    return _.map(nutritionsArray, function(aNutrition){
         aNutrition['combinedField'] = aNutrition.name + ' contains ' + aNutrition.fat + 'g fat';

         return aNutrition;
    });
}

if you are using mdt-row-paginator

//this is just an ajax callback used in the demo examples.
$scope.paginatorCallback = paginatorCallback;

//this is our mapper
function mapMyNutritions(nutritionsArray){
    return _.map(nutritionsArray, function(aNutrition){
         aNutrition['combinedField'] = aNutrition.name + ' contains ' + aNutrition.fat + 'g fat';

         return aNutrition;
    });
}

function paginatorCallback(page, pageSize){
    var offset = (page-1) * pageSize;

    return $http.post('https://api.nutritionix.com/v1_1/search', {
        'appId':'a03ba45f',
        'appKey':'b4c78c1472425c13f9ce0e5e45aa1e16',
        'offset': offset,
        'limit':pageSize,
        'query': '*',
        'fields': ['*'],
        'sort':{
            'field':'nf_iron_dv',
            'order':'desc'
        }
    }).then(function(result){
        return {
            results: mapMyNutritions(result.data.hits), //here is the important stuff
            totalResultCount: result.data.total
        };
    });
}

Please let me know if it's the right answer you were looking for, and close the ticket if it is. Thanks!

[iamisti]

@alveflo sorry, forgot to answer for you. It seems your request is a bit more complicated than I thought before.

So now we have this workaround what I just posted before this comment. You are able to access id of your row, so now you should be able to access it via your scope variables by indexing the right element in your array.

Given an example:

//in your controller
$scope.myArray = [
    {name: 'car', valueInDollar: 3000},
    {name: 'motorbike', valueInDollar: 2000},
    {name: 'boat', valueInDollar: 54000},
];

<!-- in your view -->

<mdt-custom-cell column-key="foo">
  <span ng-show="clientScope.myArray[rowId].valueInDollar > 2500">{{value}} Expensive!</span>
  <span ng-hide="clientScope.myArray[rowId].valueInDollar <= 2500">{{value}}</span>
</mdt-custom-cell>

Explanation: clientScope gives you access to your scope in your controller value is the value of the cell of the current iteration rowId is the id of the iteration/row what you can define with table-row-id-key (check docs)

[alveflo]

@iamisti no worries, mate. All right cool, that sure works for me. However I encountered some performance issues when working with relatively large data sets, but I figured I'll fork this project and submit a pull request when I've tracked down the bottleneck.

Anyway, you can close this one if you want to - rowId is good enough!

[nurhadijogja]

thank you @iamisti ,, its sounds great.. ...

i have tried with and without mapper. as @alveflo mentioned, the rowId is good enough. now i can combine multiple fields value in a column like:

<mdt-custom-cell column-key="name">
    <span><strong>{{value}}</strong></span><br>
    <span>{{clientScope.member[rowId].email}}</span>
</mdt-custom-cell>

[iamisti]

@alveflo sounds like a plan! Thanks for sharing your opinions and for any future contribution! 👍