각도 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>' 
    }; 
}); 

작업 예를