How can I put a placeholder text on ng-table select filter?



Code sample:

$scope.idFilter = {
    id: {
      id: "number",
      placeholder: "Filter by id", // Working

  $scope.nameFilter = {
    id: {
      id: "text",
      placeholder: "Filter by name", // Working

  $scope.statusFilter = {
    status: {
      id: "select",
      placeholder: "Filter by status", // Not working

It is easy to add a placeholder on a number or text filters in ngTable. However I could not manage to find a solution for select filter. I know that placeholder on a ‘select’ element is not trivial by itself, but it is achievable.

Can you find a solution for it in ngTable?
If not, can you recommend another table component that have this feature?


You can add extra option in your select with val:'' to simulate placeholder:

  id: '',
  title: 'Filter by Status'

And add default filter to refer “Filter by Status”

$scope.myTableParams = new NgTableParams({filter: { status: ""}}, {
    counts: [],
    dataset: users


Add this CSS in order to distinct the placeholder look from other selections:

/* Set the select filter placeholder item look */ {
  color: gray;

/* Prevent select filter placeholder look to cascade to its options */ select.filter-select > option {
  color: #767676;

Answered By – CMedina

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More