自己開發的公眾號，可以領取淘寶內部優惠券
在用ui-grid的時候我們可以用rowHeight設置行高，可是每一行的高度都是一樣的，無法根據行內的內容進行自適應。如下圖
為了解決這個問題，google了幾天時間找不到動態設置行高的方法。通過查看元素的結構發現這么點線索
可以發現每一個row都是通過這樣的template進行循環輸出的，這樣子就可以在這個模板上進行添加點樣式，通過ui-grid的源代碼我們找到了下面兩個模板
$templateCache.put('ui-grid/uiGridViewport',
"<div role=\"rowgroup\" class=\"ui-grid-viewport\" ng-style=\"colContainer.getViewportStyle()\"><!-- tbody --><div class=\"ui-grid-canvas\" ><div style=\"height:{{grid.appScope.fixHeight(row)}}px\" ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\" class=\"ui-grid-row\" ng-style=\"Viewport.rowStyle(rowRenderIndex)\"><div role=\"row\" ui-grid-row=\"row\" row-render-index=\"rowRenderIndex\"></div></div></div></div>" ); $templateCache.put('ui-grid/ui-grid-row', "<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" style=\"height:{{grid.appScope.fixHeight(row)}}px\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>" );
這兩個模板是ui-grid/uiGridViewport和ui-grid/ui-grid-row，為了實現效果不得不進行覆蓋原有的模板。我加了style屬性並調用當前controller的fixHeight方法，傳入當前的row參數。
在fixHeight方法里面就可以獲取row.entity屬性得到當前行的實體進行相應的邏輯處理
最終效果
