如何在 ui-grid 中包含 angular-uib 星级？答案

【问题标题】：How to include angular-uib star rating in ui-grid?如何在 ui-grid 中包含 angular-uib 星级？
【发布时间】：2016-02-03 21:41:57
【问题描述】：

我一直在尝试使用 celltemplate 字段在 ui 网格中包含 uib 星级，但它返回错误“Uncaught SyntaxError: Unexpected identifier”。经过一点调试，我发现它无法理解 celltemplate 中给出的 uib-rating 指令。（我已包含 tpls.js）

 $scope.gridOptions.columnDefs = [
    { name:'FirstName', width:100, enableCellEdit: true },
    { name:'Rating', width:75, 
        cellTemplate:'<div ng-controller="RatingDemoCtrl"><h4>Default</h4><uib-rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating></div>' 
    },
    { name:'Age', width:50 , enableCellEdit: true },
    { name:'Gender', width:75 , enableCellEdit: true },
    { name:'Salary', width:75, enableCellEdit: true }
  ];

【问题讨论】：

标签： angularjs-directive angular-ui-bootstrap angular-ui-grid

【解决方案1】：

您的模板可以简单地如下面的代码所示：

<div class="ui-grid-cell-contents">
    <uib-rating ng-model="row.entity.Rating" max="10" readonly="isReadonly">
    </uib-rating>
</div>

在 ui-grid 模板中，您可以将字段值引用为row.entity.[fieldname]。签到：https://github.com/angular-ui/ui-grid/wiki/Templating

检查这个工作示例：

http://plnkr.co/edit/59ToE2XWD9pXlD6tjpDs

【讨论】：