Griglia UI angolare: come creare un menu a discesa pre-compilato per il filtraggio di colonne

Question

Sto cercando aiuto su una funzionalità di Angular UI Grid. In particolare sto esplorando filtering e mentre ero in grado di attuare con successo l'ordinamento tramite il modulo libero campo di testo (s) nella mia applicazione come fanno nel example on their siteVorrei un po 'di aiuto per trovare un modo per invece di ordinamento mediante un pre -popolato menu a discesa per alcune colonne.

Per chiarire: By precompilabili voglio dire vorrei che la discesa per essere popolato con il mio codice. Io sono ok, se la soluzione contiene dati di hard-coded, ma il mio obiettivo finale sarebbe quello di avere il pre-popolazione deve essere composto dal unico set di valore dei dati della colonna sia smistato :)

ho visto questa funzionalità in (per esempio) l'interfaccia utente di Kendo (kendodropdownlist) ma non mi interessa il prezzo che viene fornito con quella soluzione. Vorrei attenermi alla griglia UI angolare menzionata (e collegata) sopra. Su StackOverflow ne ho trovato uno similar question ma sfortunatamente non sembrava aver ottenuto molta trazione. Spero che dando una spiegazione più dettagliata di ciò che cerco riceverò una risposta più completa di quella che ho trovato lì.

Ecco quello che è attualmente in mio controller:

var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate', 
                 'ngTouch', 'ui.grid' ]); 

simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http', 
                'uiGridConstants', function($scope, $http, uiGridConstants) { 
    $scope.columns = [ { 
     field : 'trans_detail', 
     displayName : 'Transaction' 
    }, { 
     field : 'cust_name', 
     displayName : 'Customer' 
    }, { 
     field : 'quantity', 
     displayName : 'Quantity', 
     filters : [ { 
      condition : uiGridConstants.filter.GREATER_THAN, 
      placeholder : 'greater than' 
     }, { 
      condition : uiGridConstants.filter.LESS_THAN, 
      placeholder : 'less than' 
     } 
     ] 
    }, { 
     field : 'today_date', 
     displayName : 'Current Date' 
    } ]; 
    $scope.gridOptions1 = { 
      enableSorting : true, 
      enableFiltering : true, 
      columnDefs : $scope.columns, 
      onRegisterApi : function(gridApi) { 
       $scope.grid1Api = gridApi; 
      } 
    }; 

    $http.get("../services/Coherence/Cache").success(function(data) { 
     $scope.gridOptions1.data = data; 
    }); 

} ]); 

Sotto è l'uscita - con i campi di testo in forma libera

Per questo esempio specifico colonne del cliente, la quantità, e la data corrente probabilmente lascerei i drop down della forma libera, ma mi piacerebbe davvero essere in grado di filtrare usando un menu a discesa pre-compilato per le transazioni (e averlo ovviamente nella mia casella degli strumenti per i progetti futuri!).

Grazie!

Answer 1

È possibile utilizzare qui il costruito in funzione di filtro selezionare Opzioni documentate: http://ui-grid.info/docs/#/tutorial/103_filtering

Esempio:

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 2

Si può mettere un menu a discesa nell'intestazione tramite il headerCellTemplate nelle columnDefs

columnDefs: [ 
    {field:'myField',headerCellTempalte: 'mypulldowntemplate.html"...} 
    ] 

mypulldowntemplate.html

<div ng-class="{ 'sortable': sortable }"> 
 
    <div class="ui-grid-vertical-bar">&nbsp;</div> 
 
<div class="ui-grid-cell-contents {{col.headerClass}}" col-index="renderIndex"> 
 
    {{ col.displayName CUSTOM_FILTERS }} 
 
    <br> 
 
    <select ng-model="getExternalScopes().value[col.field]" ng-change="$event.stopPropagation();getExternalScopes().yourFilterFunction(col.field)"> 
 
    </select> 
 
     
 
    ....

yourFilterFunction() può fare tutto ciò che è vuoi essere filtrato. Forse solo impostando alcune variabili che usi in un filtro personalizzato che assegni alla griglia. Puoi trovare un esempio di impostazione di una condizione nel tuo filtro personalizzato sul tutorial UI Grid qui http://ui-grid.info/docs/#/tutorial/103_filtering