用于过滤的ng-grid headerCellTemplate

时间:2014-08-15 14:55:07

标签: angularjs ng-grid

对于使用ng-grid的过滤,我的意思是列式ng-grid我看这个plunker作为一个很好的例子 - http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview。但是,当我尝试制作我自己的列过滤示例时,我按照ng-grid文档使用var

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
                           '<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
                           '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
                           '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
                           '<div class="ngSortPriority">{{col.sortPriority}}</div>'+
                         '</div>'+
                         '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

我一直在小马上遇到语法错误。有人可以让我知道这里发生了什么吗?

1 个答案:

答案 0 :(得分:0)

您的模板字符串包含'

'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+

您需要使用\,就像这样

'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+

编辑:

如果需要过滤器框,则错过了

<input type="text" ng-click="stopClickProp($event)" placeholder="Filter..." ng-model="col.filterText" ng-style="{ \'width\' : col.width - 14 + \'px\' }" style="position: absolute; top: 30px; bottom: 30px; left: 0; bottom:0;"/>

这是示例

Plunker

编辑:

原始的plunkr是从头开始设计过滤的。如果您从子字符串进行过滤,则可以尝试*开始过滤器文本框。

如果你不喜欢它,你可以修改filterBarPlugin功能:

var filterText = (col.filterText.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
searchQuery += col.displayName + ": " + filterText;

searchQuery += col.displayName + ": " + col.filterText;

Example