CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
KingKongFrog
KingKongFrog

Reputation: 14419

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

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

Upvotes: 2

Views: 3496

Answers (1)

doldt
doldt

Reputation: 4506

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

Upvotes: 2

Related Questions