当前位置: 首页 > 知识库问答 >
问题:

Ui网格单元格模板的行为不符合预期

汪晨
2023-03-14

我正在仪表板上工作,用于监控作业,状态被更新,但是Ui网格中的细胞模板在这里没有按预期运行,我尝试了什么

 $scope.gridOptions = {
      columnDefs: [{
        field: 'Id'
      }, {
        field: 'Job'
      }, {
        field: 'status',
        cellTemplate:'<div>{{grid.appScope.applyStatus(row.entity.status)}}</div>'
        //note  this work well 

       // cellTemplate:'<div><i class="fa fa-circle-o-notch fa-spin"></i></div>'

      }]
    };

并且该函数应该使用fontgreat图标更新状态

  $scope.applyStatus= function(status) {
      switch(status)
            {

                case "Pending" :
                   return  '<i class="label-info fa-pause" />'; 

                case "Running" : return '<i class="label-primary fa-play-circle-o" />'
                case "Error" :
                    return '<i class="label-danger  fa-bug" />';                                                                                   
                default:
                    return '<i class="label-default fa-box fa fa-question"/>';

            }   

    return 

};

但安格拉尔并没有像我所期望的那样,而是把这当作一段文字

这里是一个笨蛋 http://plnkr.co/edit/7UapXgNzZWPXVZbLjYFy?p=preview

如果你能帮我解释清楚,我们将不胜感激

共有1个答案

潘俊楚
2023-03-14

这里有一种使用ng类的方法。http://plnkr.co/edit/lRuP4agztDo7kxEO5VE6?p=preview

单元格模板:

<div><text><i ng-class="grid.appScope.applyStatus(row.entity.status)"/></text></div>
 类似资料:
  • 问题内容: 在下面的cellTemplate中显示数据时如何添加条件: 预期结果应为行状态显示。 这是the 子 提前致谢。 问题答案: 您必须使用。 在您的标记中,定义网格持有人,如下所示。 并在您的控制器中使用以下代码: 或使用角度滤镜。 请注意,这仅 呈现 文本。最好的方法是在ui-grid中使用它之前先转换为具有真实文本状态。以防万一您以后要进行一些基于文本的过滤。 这是一个柱塞

  • 问题内容: 如何从ui网格单元模板进行访问?这是我的控制器代码: 在此处查看其运行情况:http : //plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview 我希望单元格内容显示“ hello world”,但它们仅显示“ hello”。 问题答案: 根据http://ui-grid.info/docs/#/tutorial/305_appScope,网格具有

  • 问题内容: 我在Angular UI Grid中有一个项目列表。当我单击一行时,我想转到另一个页面。(换句话说,网格中的每一行都是一个链接。) 我想这肯定是一个非常普遍的愿望,尽管我还没有真正看到过有关如何实现的文档。什么是完成此任务的好方法? 问题答案: 我自己想出了答案。这是我的控制器(ES6): 这是我的行模板(Jade): 另外,这是我的样式表(SCSS)。我认为突出显示光标下的行并使用光

  • pre { white-space: pre-wrap; } 数据网格(datagrid)经常需要合并一些单元格。本教程将向您展示如何在数据网格(datagrid)中合并单元格。 为了合并数据网格(datagrid)单元格,只需简单地调用 'mergeCells' 方法,并传入合并信息参数,告诉数据网格(datagrid)如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被

  • mergeCells(string $scope, string $data [, resource $formatHandler]): self string $scope $excel->fileName("test.xlsx") ->mergeCells('A1:C1', 'Merge cells') ->output();

  • 单击包含< code>VerticalLayout行等组件的Vaadin 8 中的单元格时,不会选中该行(使用Vaadin 8.1.5)。 如果组件未填充整个单元格,则单击单元格中未使用的区域会使该行处于选中状态。 我一直在研究如何将点击组件转发到单元格点击侦听器,但尚未对此有任何控制。猜猜这甚至不是最好的方法。 解决方案是什么?