ui网格angularjs中的条件单元格模板

Question

如何在ui-grid单元格中显示数据时添加条件模板如下：

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

预期的结果应该是行状态显示Active/NonActive/Deleted。

这是plunker

提前谢谢。

Answer 1

您必须使用externalScopes。

在标记中，像这样定义格架。

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

在您的控制器中使用以下代码：

var statusTxt = ['Active', 'Non Active', 'Deleted'];
$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};
var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

或者使用角度过滤器。

请注意，这只是渲染文本。最好的方法是在ui网格中使用myData之前将其转换为具有真实文本状态。万一你以后想做一些基于文本的过滤。

这是一个Plunker

Answer 2

我建议使用ng-if来解决这个问题。

$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'
    }]
};

Answer 3

我为您提供了另一个不使用外部作用域的解决方案：

模板如下：

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

这里是plunker：

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

Answer 4

使用cellFilter。

columnDefs: [{
    field: 'code'
}, {
    field: 'name'
}, {
    field: 'status',
    cellFilter: 'mapStatus'
}]

app.filter('mapStatus', function() {
    var statusMap = ['Active', 'Non Active', 'Deleted'];
    return function(code) {
        if (!angular.isDefined(code) || code < 0 || code > 2) {
            return '';
        } else {
            return statusMap[code];
        }
    };
});

plunker

Answer 5

您必须更改模板。当你在angular ui网格中引用外部作用域时，你可以使用grid.appScope.

var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';

Answer 6

请尝试以下脚本。它对我有用。

  app.controller('MainCtrl', ['$scope',
  function($scope) {
  var statusTxt = ['Active', 'Non Active', 'Deleted'];
$scope.showMe= function(val) {
    return statusTxt[val];
  };
var statusTemplate = '<div>{{grid.appScope.showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};
$scope.gridOptions.data = [{
  "code": "Cox",
  "name": "Carney",
  "status": 0
}, {
  "code": "Lorraine",
  "name": "Wise",
  "status": 1
}, {
  "code": "Nancy",
  "name": "Waters",
  "status": 2
  }];
  }
]);