How to use ng-show in ui-grid within celltemplate using $scope variable

Question

I'm trying to display an element based on a scope variable. I can't seem to get it to work. Since $scope.hi exists I'd like the word "Active" to show up. Here is my code:

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', function ($scope, $timeout) {
  $scope.hi = true;
  $scope.gridOpts = {        
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'isActive', field: 'isActive'},
          { name:'template',cellTemplate:'<div><a ng-show="hi">Active</a><a ng-hide={{row.entity.isActive=="N"}}>Deactive</a></div>'}
        ]
  };

  $scope.waiting = "Waiting...";
  $timeout(function () {
    $scope.gridOpts.data = [{ name: 'Bob' ,isActive:'Y'}];
  }, 3000)
  .then(function() {
    $timeout( function() {
      $scope.gridOpts.data = [{ name: 'John',isActive:'N' }];
    }, 3000);
    $scope.waiting = "Waiting again...";
  })
});

http://plnkr.co/edit/eLFjp8qJCtBRLTrQ7GE5?p=preview

possible duplicate of How to access scope from ui-grid cell template? — doldt
– doldt, Commented Jul 7, 2015 at 19:53

doldt · Accepted Answer · 2015-07-07 19:47:05Z

2

ui-grid creates its grids with an isolate scope, meaning the scope behind that template is not the one you define the template in.

That isolated scope, however, contains a reference to this original scope, which you can access as grid.appScope.

If you change hi to grid.appScope.hi, your example works. Forked version here.

See the ui-grid API docs on appScope:

appScope: reference to the application scope (the parent scope of the ui-grid element). Assigned in ui-grid controller

use gridOptions.appScopeProvider to override the default assignment of $scope.$parent with any reference

edited Jul 7, 2015 at 19:47

answered Jul 7, 2015 at 19:41

doldt

4,5063 gold badges24 silver badges36 bronze badges

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

1 Comment

KingKongFrog Over a year ago

I was on ui-grid RC15 and this didn't work. Once updated to RC22 this solution worked.

Collectives™ on Stack Overflow

How to use ng-show in ui-grid within celltemplate using $scope variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related