How to call a function multiple times from cell template in ui-grid in angularjs?

Question

I have one controller in angularJs(1.6) which is using ui-grid. Problem is there is one cell template. I want to get different values for rating percentage in this template. I have created a function "getRating()" and called it. But it gets called only one time. Hence I get the same value for all the template.

Could anyone please help me with this?

Here is my controller code:

 (function () {
    'use strict';

     define([
         'angular'
     ], function (angular) {

     function SelectToolController($scope, $timeout, $filter, uiGridConstants) {
                  var vm = this,
                      _gridApi,
                      _cellTemplate,
                      _columnDefs,
                      _starRatingTemplate,
                      _starRatingColumn,
                      _starEnable;
            };
            _starRatingTemplate = [
                  '<div class="opr-star-rating"  >',
                  '<opr-star-rating rating-percentage="'+getRating()+'">',
                  '</opr-star-rating>',
                  '</div>'
            ].join('');

      vm.rating = 10;

      //this func is called from _starRatingTemplate 
       vm.getRating = function(){
           return vm.rating++;
        }


      });

As you can see I am incrementing the value everytime the function getRating is called. But this function is called only one time. So I end up getting value 11 for all the cells in my grid.

ArielGro · Accepted Answer · 2018-11-20 07:20:55Z

0

The template string is "calculated" once and used in each cell, so the call to getRating() is made only once, when building the template string.

To make a call to the function each time, you should use the 'mustache' {{}} and reference your controller.

So your code should be similar to this:

_starRatingTemplate = [
    '<div class="opr-star-rating"  >',
    '<opr-star-rating rating-percentage="{{$ctrl.getRating()}}">',
    '</opr-star-rating>',
    '</div>'
].join('');

answered Nov 20, 2018 at 7:20

ArielGro

7831 gold badge11 silver badges24 bronze badges

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

3 Comments

Anubha Gupta Over a year ago

It is returning empty

ArielGro Over a year ago

Maybe your controller is not called $ctrl? Can you share a more detailed code or better yet a Plunker link?

ArielGro Over a year ago

Another thought - add a reference to the controller into the gridOptions, like this: vm.gridOptions.appScope = vm and then you can call {{$ctrl.gridOptions.appScope.getRating()}}

Collectives™ on Stack Overflow

How to call a function multiple times from cell template in ui-grid in angularjs?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related