javascript - 单元格模板中的 Angularjs 指令 ng-hide 不绑定(bind)网格数据的更改

Question

单元格模板中的 Angular 指令 ng-hide 不与网格数据更改的最新数据绑定(bind)。请查看 plunkr 了解更多详细信息:- http://plnkr.co/edit/rj0PrfyzeyVeV8Q8RWtG?p=preview 在 plunker 模板中，字段不会随着数据的变化而更新。

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

app.controller('MainCtrl', function ($scope, $timeout) {
  $scope.gridOpts = {        
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'isActive', field: 'isActive'},
          { name:'template',cellTemplate:'<div><a ng-hide={{row.entity.isActive=="Y"}}>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...";
  })
});

Answer 1

您需要在 ng-hide 中添加一个表达式

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.

所以你的ng-hide 应该像

..ng-hide=row.entity.isActive=="Y"..

不像这种插值，

.. ng-hide={{row.entity.isActive=="Y"}}..

这里是更新的DEMO