如何在 ng-table select 过滤器上放置占位符文本？

Question

代码示例： https://plnkr.co/edit/hdYjHtEx1Dto1q6UVCS9

$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
    }
  };

在 ngTable 中为数字或文本过滤器添加占位符很容易。但是我无法找到 select 过滤器的解决方案。我知道 'select' 元素上的占位符本身并不简单，但它是可以实现的。

你能在 ngTable 中找到解决方案吗？
如果没有，您能否推荐另一个具有此功能的 table 组件？

Answer 1

您可以在 select 中使用 val:'' 添加额外的选项来模拟占位符：

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

并添加默认过滤器以引用 "Filter by Status"

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

结果： https://plnkr.co/edit/luaas1dExIuCYMa4WtN3?p=preview

更新：
添加此 CSS 以将占位符外观与其他 selections 区分开来：

/* Set the select filter placeholder item look */
table.ng-table select.filter-select.ng-empty {
  color: gray;
}

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

Answer 2

完成@CMedina 的回答：

对于多个不同的 select 过滤器，您可以创建另一个“statusFilter”对象：

      $scope.statusFilter2 = {
        status2: {
          id: "select",
          placeholder: "Filter by status",
        }
      };

然后将其添加到之前创建的 ngTableParams 过滤器中：

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

别忘了更新您的 DOM。

如何在 ng-table select 过滤器上放置占位符文本？

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

html

javascript

angularjs

ngtable