Angularjs指令ng-hide在单元格模板中对网格数据的更改没有约束力

时间:2015-06-21 16:52:25

标签: javascript angularjs

单元格模板中的Angular指令ng-hide不会与网格数据更改的最新数据绑定。请查看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...";
  })
});

1 个答案:

答案 0 :(得分:1)

您需要ng-hide

中的表达式
  

ngHide指令根据提供给ngHide属性的表达式显示或隐藏给定的HTML元素。

所以ng-hide 应该像

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

不喜欢这种插值,

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

这是更新后的DEMO