【问题标题】:Ui-Grid CellTemplate does not behave as expectedUi-Grid CellTemplate 的行为不符合预期
【发布时间】:2016-01-12 08:57:10
【问题描述】:

我正在使用仪表板来监控作业并且状态已更新 对接 Ui-Grid 中的 cellTemplate 未按预期运行 这是我尝试过的

 $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>'

      }]
    };

这个函数应该用一个很棒的图标来更新状态

  $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 

};

但是 Angulars 并没有呈现我期望的内容,而是将其视为文本

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

任何有关良好引擎盖解释的帮助将不胜感激

【问题讨论】:

    标签: angularjs angular-ui-bootstrap angular-ui-grid


    【解决方案1】:

    这是一种使用 ng-class 的方法。 http://plnkr.co/edit/lRuP4agztDo7kxEO5VE6?p=preview

    细胞模板:

    <div><text><i ng-class="grid.appScope.applyStatus(row.entity.status)"/></text></div>
    

    【讨论】:

    • 好吧,这很好,但是为什么单元格模板会这样呢??
    • {{}} 用于评估表达式和范围变量。
    • 我不知道。我觉得我给出的解决方案比使用ng-bind-html更好。反正我也不知道利弊。
    猜你喜欢
    • 2016-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-27
    • 2022-01-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多