Question

我想在ng-grid 3.0中使用headerCellTemplate选项添加基于AngularJs MultiSelect的自定义过滤器。请参阅plunker。

  <div ng-controller="mainCtrl">
  <multi-select
    input-model="names"
    button-label="name"
    item-label="name"
    tick-property="ticked"
    max-labels="1"
    helper-elements=""
    on-item-click="fClick( data )"
    default-label="None"
    class="level-multi-select">
  </multi-select>

所有东西，只要它位于网格之外，看起来就很好。当它在里面时，我遇到了两个问题：

过滤后，数据似乎已过滤但未正确显示。
布局已损坏。在不覆盖css的情况下，下拉隐藏在ui-cells后面，并在点击后重新定位。在应用here（当前版本的plunker）的建议后，下拉列表会改变顶部标题的高度。我更喜欢与网格菜单相同的显示（点击右上角图标后可见）。

Answer 1

感谢GitHub的帮助，我找到了两个解决方案：

一种是覆盖customHeaderTemplate，就像我上面的例子一样。 css必须以不同方式进行修改。我还纠正了代码中的错误。在html中不应该引用mainCtrl。我使用第二个控制器进行多选并修改代码以使用$ scope.grid.appScope。我认为使用广播会更清晰，但至少代码很短

http://plnkr.co/edit/lcoTtIdg723yHXtwsKjl?p=preview

  $scope.grid.appScope.myData = _.filter( $scope.grid.appScope.originalData, function (item) {

    return _.contains(selectedNames, item.name) ;
  });

其次是基于新的开发，而这还不是ui-grid的一部分。您可以按照问题#2918查看详细信息。在GitHUb页面上还有第二个plunke的链接

Angular ui-grid自定义过滤器不能用作headerCellTemplate

1 个答案: