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

亨德拉

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

这是the

提前致谢。

主力

您必须使用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
  }]
};

或使用角度滤镜。

请注意,这仅呈现文本。最好的方法是myData在ui-grid中使用它之前先转换为具有真实文本状态。以防万一您以后想要进行一些基于文本的过滤。

这是一个柱塞

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ui-grid angularjs单元格模板中的自定义指令

来自分类Dev

ui-grid angularjs单元格模板中的自定义指令

来自分类Dev

Angularjs ui-grid 单元格模板中的 ng-click 不起作用

来自分类Dev

Angular-ui-grid-如何根据单元格的值有条件地显示单元格模板

来自分类Dev

Angular-ui-grid-如何根据单元格的值有条件地显示单元格模板

来自分类Dev

Angular UI-Grid 标题单元格模板

来自分类Dev

Angular UI Grid不更新单元格中的指令

来自分类Dev

如何将AngularJS ui-grid单元格中的数字值格式化为两位小数?

来自分类Dev

Angular UI Grid,通过模板将按钮添加到行单元格

来自分类Dev

UI-GRID的默认标题单元格模板是什么?

来自分类Dev

选定的ui-grid单元格的div ID

来自分类Dev

选定的ui-grid单元格的div ID

来自分类Dev

基于单元格值的UI Grid RowTemplate颜色

来自分类Dev

将显示角度ui.grid [[object HTMLDivElement]],而不是每个单元格中的数据

来自分类Dev

使用ui Grid编辑单元格功能中的后端Rest API保存更新的数据

来自分类Dev

使用可编辑的下拉单元格在ui-grid中显示可读数据

来自分类Dev

如何使用cellClass函数在UI Grid中突出显示唯一单元格?

来自分类Dev

在ui-grid 3.0中标记修改的单元格/行$ dirty

来自分类Dev

Angular UI Grid API在捕获最后的单元格编辑中不起作用

来自分类Dev

AngularJS,ui-grid

来自分类Dev

ui-grid排序,过滤模板单元

来自分类Dev

AngularJS实现ui-grid

来自分类Dev

UI-Grid中的角UI选择?

来自分类Dev

Angular ui-grid无法复制单元格文本

来自分类Dev

Angular UI Grid过滤器仅适用于单元格值的开头

来自分类Dev

如何在每个标题单元格ui-grid中放置工具提示说明

来自分类Dev

ui-grid分组线的位置和分组未显示给隐藏的单元格

来自分类Dev

Ui-Grid - 更改背景颜色单元格相同的值

来自分类Dev

AngularJS中的Kendo UI Grid持久状态

Related 相关文章

  1. 1

    ui-grid angularjs单元格模板中的自定义指令

  2. 2

    ui-grid angularjs单元格模板中的自定义指令

  3. 3

    Angularjs ui-grid 单元格模板中的 ng-click 不起作用

  4. 4

    Angular-ui-grid-如何根据单元格的值有条件地显示单元格模板

  5. 5

    Angular-ui-grid-如何根据单元格的值有条件地显示单元格模板

  6. 6

    Angular UI-Grid 标题单元格模板

  7. 7

    Angular UI Grid不更新单元格中的指令

  8. 8

    如何将AngularJS ui-grid单元格中的数字值格式化为两位小数?

  9. 9

    Angular UI Grid,通过模板将按钮添加到行单元格

  10. 10

    UI-GRID的默认标题单元格模板是什么?

  11. 11

    选定的ui-grid单元格的div ID

  12. 12

    选定的ui-grid单元格的div ID

  13. 13

    基于单元格值的UI Grid RowTemplate颜色

  14. 14

    将显示角度ui.grid [[object HTMLDivElement]],而不是每个单元格中的数据

  15. 15

    使用ui Grid编辑单元格功能中的后端Rest API保存更新的数据

  16. 16

    使用可编辑的下拉单元格在ui-grid中显示可读数据

  17. 17

    如何使用cellClass函数在UI Grid中突出显示唯一单元格?

  18. 18

    在ui-grid 3.0中标记修改的单元格/行$ dirty

  19. 19

    Angular UI Grid API在捕获最后的单元格编辑中不起作用

  20. 20

    AngularJS,ui-grid

  21. 21

    ui-grid排序,过滤模板单元

  22. 22

    AngularJS实现ui-grid

  23. 23

    UI-Grid中的角UI选择?

  24. 24

    Angular ui-grid无法复制单元格文本

  25. 25

    Angular UI Grid过滤器仅适用于单元格值的开头

  26. 26

    如何在每个标题单元格ui-grid中放置工具提示说明

  27. 27

    ui-grid分组线的位置和分组未显示给隐藏的单元格

  28. 28

    Ui-Grid - 更改背景颜色单元格相同的值

  29. 29

    AngularJS中的Kendo UI Grid持久状态

热门标签

归档