角度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を使用して実現できます。その後

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

次のようにtype列にcolumnDefを変更します：あなたのコードの場合

あなたはidにanimalTypesでlabelプロパティを変更する必要があり、また、「すべて」のオプションを追加することになりスニペット

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