角度ui網格列下拉篩選器空白選項

Question

使用角度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> 

這將顯示每個列的下拉過濾器選項，但有一個額外的空選項。如何刪除空白/空白選項或用「全部」文本替換空白/空白選項？

Answer 1

您可以使用custom filter來實現此目的。

對於您的代碼段，你就需要在animalTypes的label屬性更改爲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的工作示例