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

2023年6月3日 419次阅读

我想在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)的建议之后,下拉正在改变顶部标题的高度.我更喜欢与网格菜单相同的显示(点击右上角图标后可见).

最佳答案 感谢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的链接

点赞