Issue #4085: Menu Items's title can now be a function (the returned value get displayed). Default Menu Items titles now are functions that return translated value, so translation changes at runtime.

Author: JSlain

misc/site/index.html

@@ -160,6 +160,10 @@ <h4 class="feature-heading">Basic Example</h4>
 
           <h4 class="feature-heading">Complex Example</h4>
           <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns></div>
+
+          
+          <label>Language: </label>
+          <select ng-options="language for language in languages" ng-model="currentLanguage" ng-change="changeLanguage()"></select>
         </div>
       </div>
     </div>
@@ -182,10 +186,10 @@ <h4 class="feature-heading">Complex Example</h4>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= latestAngular %>/angular.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= latestAngular %>/angular-animate.js"></script>
-  <script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
+  <script src="/release/ui-grid.js"></script>
   <script>
     angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns'])
-    .run(function($rootScope, uiGridConstants) {
+    .run(function($rootScope, uiGridConstants, i18nService) {
       $rootScope.gridOptionsSimple = {
         data: [
           {
@@ -456,6 +460,12 @@ <h4 class="feature-heading">Complex Example</h4>
           }
         ]
       };
+
+      $rootScope.languages = i18nService.getAllLangs();
+      $rootScope.currentLanguage = i18nService.getCurrentLang();
+      $rootScope.changeLanguage = function(){
+          i18nService.setCurrentLang($rootScope.currentLanguage);
+      };
     });
   </script>
 

misc/tutorial/104_i18n.ngdoc

@@ -54,7 +54,7 @@ For an example using angular-translate to translate your headers, refer to http:
          <p>Using Filter:</p>
          <p>{{"groupPanel.description" | t}}</p>
 
-         <p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. </p>
+         <p>Click the header menu to see language.</p>
 
          <div ui-grid="gridOptions" class="grid"></div>
       </div>

src/js/core/directives/ui-grid-column-menu.js

@@ -162,7 +162,7 @@ function ( i18nService, uiGridConstants, gridUtil ) {
     getDefaultMenuItems: function( $scope ){
       return [
         {
-          title: i18nService.getSafeText('sort.ascending'),
+          title: function(){return i18nService.getSafeText('sort.ascending');},
           icon: 'ui-grid-icon-sort-alt-up',
           action: function($event) {
             $event.stopPropagation();
@@ -176,7 +176,7 @@ function ( i18nService, uiGridConstants, gridUtil ) {
           }
         },
         {
-          title: i18nService.getSafeText('sort.descending'),
+          title: function(){return i18nService.getSafeText('sort.descending');},
           icon: 'ui-grid-icon-sort-alt-down',
           action: function($event) {
             $event.stopPropagation();
@@ -190,7 +190,7 @@ function ( i18nService, uiGridConstants, gridUtil ) {
           }
         },
         {
-          title: i18nService.getSafeText('sort.remove'),
+          title: function(){return i18nService.getSafeText('sort.remove');},
           icon: 'ui-grid-icon-cancel',
           action: function ($event) {
             $event.stopPropagation();
@@ -204,7 +204,7 @@ function ( i18nService, uiGridConstants, gridUtil ) {
           }
         },
         {
-          title: i18nService.getSafeText('column.hide'),
+          title: function(){return i18nService.getSafeText('column.hide');},
           icon: 'ui-grid-icon-cancel',
           shown: function() {
             return service.hideable( $scope );

src/js/core/directives/ui-grid-menu.js

@@ -301,6 +301,16 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, i18
             }
           };
 
+          $scope.label = function(){
+            var toBeDisplayed = $scope.name;
+
+            if (typeof($scope.name) === 'function'){
+              toBeDisplayed = $scope.name.call();
+            }
+
+            return toBeDisplayed;
+          };
+
           $scope.i18n = i18nService.get();
         }
       };

src/templates/ui-grid/uiGridMenuItem.html

@@ -13,5 +13,5 @@
      aria-hidden='true'>
        
     </i>
-    {{ name }}
+    {{ label() }}
 </button>

test/unit/core/directives/ui-grid-menu.spec.js

@@ -29,6 +29,9 @@ describe('ui-grid-menu', function() {
       {
         title: 'Blah 4',
         shown: function () { return false; }
+      },
+      {
+        title: function(){return 'Blah 5';}
       }
     ];
 
@@ -297,4 +300,23 @@ describe('ui-grid-menu', function() {
       expect($scope.grid.options.gridMenuTemplate).toEqual(customGridMenu);
     });
   });
+
+  describe('title displayed', function(){
+    beforeEach(function(){
+      $scope.$broadcast('show-menu');
+      $scope.$digest();
+    });
+
+    it('should accept to display some text directly', function(){
+      var item = menu.find('.ui-grid-menu-item').first();
+      expect(item.text().trim()).toBe('Blah 1');
+    });
+
+
+    it('should accept to display the return value of a called function', function(){
+      var item = menu.find('.ui-grid-menu-item').last();
+      expect(item.text().trim()).toBe('Blah 5');
+    });
+  });
 });
+