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

Question

我一直在尝试使用 celltemplate 字段在 ui 网格中包含 uib 星级，但它 returns 出现错误 "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 }
  ];

Answer 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

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

How to include angular-uib star rating in ui-grid?

angularjs-directive

angular-ui-bootstrap

angular-ui-grid