कोणीय यूआई ग्रिड: कॉलम फ़िल्टरिंग के लिए प्री-पॉप्युलेटेड ड्रॉपडाउन मेनू कैसे बनाएं

Question

मैं Angular UI Grid की सुविधा के बारे में कुछ मदद ढूंढ रहा हूं। विशेष रूप से मैं filtering की खोज कर रहा हूँ और जब मैं सफलतापूर्वक अपने आवेदन में मुक्त रूप पाठ क्षेत्र (रों) का उपयोग कर छँटाई लागू करने के लिए के रूप में वे example on their siteमें क्या कर रहा था मैं बजाय तरह एक पूर्व का उपयोग करने के कुछ एक तरह से ढूंढने में सहायता चाहते हैं कुछ कॉलम के लिए पॉप-डाउन ड्रॉप-डाउन मेनू।

स्पष्टीकरण के लिए: पूर्व-जनसंख्या से मेरा मतलब है कि मैं ड्रॉप-डाउन को अपने कोड के माध्यम से पॉप्युलेट करना चाहता हूं। मैं ठीक हूं अगर समाधान में हार्ड-कोडित डेटा होता है लेकिन मेरा अंतिम लक्ष्य अद्वितीय कॉलम के डेटा वैल्यू सेट को क्रमबद्ध करने के लिए होगा :)

मैंने इस कार्यक्षमता को देखा है (उदाहरण के लिए) केंडो यूआई (केंडोड्रोपडाउनलिस्ट) लेकिन मुझे उस समाधान के साथ आने वाले मूल्य टैग में रूचि नहीं है। मैं ऊपर उल्लिखित कोणीय यूआई-ग्रिड (और लिंक) के साथ रहना चाहता हूं। StackOverflow पर मुझे एक similar question मिला लेकिन दुर्भाग्यवश ऐसा लगता है कि यह बहुत अधिक कर्षण प्राप्त नहीं हुआ है। मैं उम्मीद कर रहा हूं कि जो कुछ मैं ढूंढ रहा हूं उसके बारे में अधिक विस्तृत स्पष्टीकरण देकर मुझे वहां से कहीं अधिक पूर्ण उत्तर मिलेगा।

यहाँ क्या मेरी नियंत्रक में है है:

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; 
    }); 

} ]); 

नीचे उत्पादन होता है - मुक्त रूप पाठ फ़ील्ड

इस विशिष्ट उदाहरण कॉलम ग्राहक के लिए के साथ, मात्रा, और वर्तमान तिथि मैं शायद मुक्त फॉर्म ड्रॉप डाउन के रूप में छोड़ दूंगा, लेकिन मैं वास्तव में लेन-देन के लिए पूर्व-आबादी वाले ड्रॉप डाउन का उपयोग करके फ़िल्टर करना चाहता हूं (और पाठ्यक्रम के भविष्य की परियोजनाओं के लिए इसे अपने टूलबॉक्स में रखना!)।

धन्यवाद!

Answer 1

आप selectOptions फ़िल्टर सुविधा में बनाया यहाँ प्रलेखित उपयोग कर सकते हैं: http://ui-grid.info/docs/#/tutorial/103_filtering

उदाहरण:

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

आप अपने columnDefs में headerCellTemplate के माध्यम से शीर्ष लेख में एक अधोगामी मीनू डाल सकते हैं

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() जो कुछ भी यह है क्या कर सकते हैं आप फ़िल्टर करना चाहते हैं। संभवतः आप कुछ चर सेट करके जो आप कस्टम फ़िल्टर में उपयोग करते हैं, जिसे आप ग्रिड को असाइन करते हैं। आप ui ग्रिड ट्यूटोरियल पर अपने कस्टम फ़िल्टर में एक शर्त सेट करने का उदाहरण पा सकते हैं http://ui-grid.info/docs/#/tutorial/103_filtering

Answer 3

मुझे हाल ही में वही आवश्यकता थी। मैंने इसे स्वयं समझ लिया है.यह मेरे द्वारा पीछा किया गया कदम है। अगर आप चाहते हैं ui-grid में फ़िल्टर का उपयोग करें, आप दो दृष्टिकोणों का उपयोग कर सकते हैं या तो मौजूदा यूई-ग्रिड custom_filters का उपयोग कर सकते हैं या हेडर टेम्पलेट बनाया है और इसे ग्रिड में बांध सकते हैं। एक अच्छा लेख है कि add drop downs in ui-grid कैसे। मैं उन कोडों पर आधारित हूं जिन्हें मैंने अपने कोड स्निपेट को अनुकूलित किया है। क्या मैंने index.html के अंदर कस्टम टेम्पलेट बनाया है।

<script type="text/ng-template" id="uiSelect"> 

     <ui-select-wrap> 
     <label> Gender</label> 
     <ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true" on-select="grid.appScope.filterTableBasedonDropDownSelect($item)"> 
      <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match> 
      <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search"> 
      <span>{{ item }}</span> 
      </ui-select-choices> 
     </ui-select> 
     </ui-select-wrap> 
    </script> 

मैं filterTableBasedonDropDownSelect($item) कहा जाता है यह छानने logic.Note है कि जब आप ui ग्रिड सामान्य कार्य घोषणा में एक समारोह फोन काम नहीं करता है संभाल लेंगे समारोह बनाया है। चूंकि यूई-ग्रिड का अपना parent scope है। इसलिए आपको इस तरह अपना फ़ंक्शन कॉल करना चाहिए।

on-select="grid.appScope.filterTableBasedonDropDownSelect($item)" 

फिर आप अपने फ़ंक्शन तर्क को नियंत्रक के तहत घोषित कर सकते हैं।

$scope.filterTableBasedonDropDownSelect= function(item){ 
    $scope.gridOptions.data = $filter('filter')($scope.jsonData,item, undefined);}; 

मेरा काम example है।

आशा है कि इससे किसी के लिए मदद मिलेगी।