How to show messages when ngGrid have no values
文章目录
ngGrid is a powerful grid system by AngularJS. But when binded data is empty, there’s no options to let ngGrid show any messages inside the grid.
I googled and found an issues here: https://github.com/angular-ui/ng-grid/issues/496 He provides us a directive for us to use. I tried that but his code is not good. I wrote my own:
angular.module("grid.ext", []).directive('showEmptyMsg', function($compile, $timeout) {
return {
restrict : 'A',
link : function(scope, element, attrs) {
var msg = (attrs.showEmptyMsg) ? attrs.showEmptyMsg : 'Nothing to display';
var template = "<div class='no-results-msg'>" + msg + "</div>";
var tmpl = angular.element(template);
$compile(tmpl)(scope);
scope.$watch('gridData', function() {
if (_.size(scope.gridData) === 0) {
element.find('.ngViewport').append(tmpl);
} else {
element.find(tmpl).remove();
}
});
},
scope : {
gridData : '='
}
};
})
And you could use it like this:
<div class="gridStyle" ng-grid="gridOptions" show-empty-msg="No Results Found" grid-data="myGridData">
</div>
文章作者 贺思聪
上次更新 2014-02-20
许可协议 未经原作者许可禁止转载