Question

在使用angular ui网格时，我们使用selectOptions将下拉选项填充为列过滤器。类似于以下代码：

   angular.module('exampleApp', ['ui.grid'])
   .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
var animals = [
  { id: 1, type: 'Mammal', name: 'Elephant' },
  { id: 2, type: 'Reptile', name: 'Turtle' },
  { id: 3, type: 'Mammal', name: 'Human' }
];

var animalTypes = [
  { value: 'Mammal', label: 'Mammal' },
  { value: 'Reptile', label: 'Reptile'}
];

$scope.animalGrid = {
  enableFiltering: true,
  columnDefs: [
    {
      name: 'type', 
      field: 'type', 
      filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
    },
    { name: 'name', name: 'name'}
  ],
  data: animals
};
}]);

    <link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <div ng-app="exampleApp">
    <div ng-controller="exampleCtrl">
    <h1>UI Grid Dropdown Filter Example</h1>
    <div ui-grid="animalGrid" class="grid"></div>
    </div>
    </div>

这显示每列的下拉过滤器选项，但有一个额外的空选项。如何删除空/空白选项或将空/空白选项替换为＆＃39;全部＆＃39;文本？

Answer 1

您可以使用custom filter来实现此目的。

对于您的代码段，您需要将label中的animalTypes属性更改为id，并添加“全部”选项：

var animalTypes = [
  { value: 'All', id: '' },
  { value: 'Mammal', id: 'Mammal' },
  { value: 'Reptile', id: 'Reptile'}
];

然后修改columnDef列的type，如下所示：

columnDefs: [
  {
    name: 'type', 
    field: 'type',
    // template for rendering a custom dropdown box
    filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>', 
    filter: { 
      // initialize the filter to 'All'
      term: '',
      // the dropdown options (used in the custom directive)
      options: animalTypes
    }
  },
  ...
],

请注意，您需要使用filter.term属性将过滤器初始化为“全部”。如果不这样做，您会发现当网格加载时，下拉框顶部会插入一个空白选项。初始化下拉可以防止这种情况发生。

然后，您可以定义自定义下拉指令，以呈现包含animalTypes选项的选择框：

app.directive('myCustomDropdown', function() {
  return {
    template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
  };
});

请参阅this Fiddle了解工作示例

角度ui网格列下拉过滤器空白选项

1 个答案: