Пустой фильтр выпадающего списка столбцов сетки углового пользовательского интерфейса

При использовании угловой сетки пользовательского интерфейса мы используем 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>

Это показывает параметры раскрывающегося списка для каждого столбца, но с дополнительным пустым параметром. Как удалить пустую/пустую опцию или заменить пустую/пустую опцию текстом «Все»?


javascript angularjs angular-ui-grid ui-grid
person priyam    schedule 24.11.2016    source источник
comment
Отлично, только маленькая вещь: в вашем вопросе нет ни одной строки кода, как вы ожидаете, что кто-то вам поможет?   -  person Vassilis Pits    schedule 24.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Этого можно добиться с помощью настраиваемого фильтра.

Для вашего фрагмента кода вам нужно будет изменить свойство 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>'
  };
});

См. рабочий пример в этой скрипте.

person Ian A    schedule 25.11.2016
comment
Как получить поле «Все», когда вы динамически заполняете значения и метки животных? - person themaster; 16.06.2017
comment
У вас есть код, которым вы могли бы поделиться, чтобы показать, как вы заполняете типы животных? - person Ian A; 16.06.2017