ui-grid angularjs中的条件单元格模板

发布时间：2020-12-17 07:42:55 所属栏目：安全来源：网络整理

导读：在ui-grid cellTemplate中显示数据时如何添加条件： $scope.status = ['Active','Non Active','Deleted'];$scope.gridOptions = { columnDefs: [{ field: 'code' },{ field: 'name' },{ field: 'status',cellTemplate: 'div{{status[row.entity.status]}}/di

在ui-grid cellTemplate中显示数据时如何添加条件：

$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

提前致谢.

你必须使用externalScopes.

在你的标记中定义这样的栅格.

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

在你的控制器中使用这个代码：

var statusTxt = ['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
  }]
};

或使用角度过滤器.

请注意,这只会显示文字.最好的方法是将myData转换为具有真实的文本状态,然后在ui-grid中使用它.以防万一你以后要做一些基于文本的过滤.

这是一个Plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!