Как поместить всплывающую подсказку в сетку и выберите фильтр
В ui-grid кто-нибудь знает, как создать всплывающую подсказку, которая будет отображаться в параметрах выбранного фильтра? Например, в учебном примере с фильтром, чтобы всплывающая подсказка отображалась при наведении указателя мыши на параметры "мужской", "женский",...?
1 ответ
Я думаю, вам просто нужно переопределить шаблон для ui-grid/ui-grid-filter.
$templateCache.put('ui-grid/ui-grid-filter',
"<div class=\"ui-grid-filter-container\" ng-style=\"col.extraStyle\" ng-repeat=\"colFilter in col.filters\" ng-class=\"{'ui-grid-filter-cancel-button-hidden' : colFilter.disableCancelFilterButton === true }\"><div ng-if=\"colFilter.type !== 'select'\"><input type=\"text\" class=\"ui-grid-filter-input ui-grid-filter-input-{{$index}}\" ng-model=\"colFilter.term\" ng-attr-placeholder=\"{{colFilter.placeholder || ''}}\" aria-label=\"{{colFilter.ariaLabel || aria.defaultFilterLabel}}\"><div role=\"button\" class=\"ui-grid-filter-button\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term !== null && colFilter.term !== ''\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\"> </i></div></div><div ng-if=\"colFilter.type === 'select'\"><select ng-model=\"colFilter.term\" ng-show=\"colFilter.selectOptions.length > 0\" ng-attr-placeholder=\"{{colFilter.placeholder || aria.defaultFilterLabel}}\" aria-label=\"{{colFilter.ariaLabel || ''}}\" class=\"ui-grid-filter-select ui-grid-filter-input-{{$index}}\"> <option ng-repeat=\"option in colFilter.selectOptions\" value=\"{{ option.value }}\" title=\"{{ option.label }}\">{{ option.label }}</option></select><div role=\"button\" class=\"ui-grid-filter-button-select\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term != null\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\"> </i></div></div></div>");