web-dev-qa-db-ja.com

Angular UI Grid：列フィルタリング用に事前入力されたドロップダウンメニューを作成する方法

Angular UI Gridの機能に関するヘルプを探しています。具体的にはフィルタリングを調査していますが、アプリケーションで自由形式のテキストフィールドを使用してソートを正常に実装できましたサイトの例で行うように、代わりに、特定の列に事前入力されたドロップダウンメニューを使用してソートする方法。

明確にするために：事前に入力することにより、ドロップダウンにコードを入力することを希望します。ソリューションにハードコーディングされたデータが含まれていても問題ありませんが、最終的な目標は、事前に入力された列のuniqueデータ値セットで構成することです:)

（たとえば）Kendo UI（kendodropdownlist）でこの機能を見てきましたが、そのソリューションに付属している値札には興味がありません。 Angular上記の（およびリンクされた）UIグリッドに固執したいと思います。StackOverflowで、1つ類似した質問しかし、残念なことにそれは多くの牽引力を獲得していないようでした。

現在、私のコントローラーにあるものは次のとおりです。

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

} ]);

以下は出力です-自由形式のテキストフィールド

Example Table with free form filters

この特定の例の列Customer、Quantity、およびCurrent Dateでは、おそらく自由形式のドロップダウンとして残しますが、トランザクションに事前に入力されたドロップダウンを使用してフィルタリングできるようにしたい（そしてそれをツールボックスに入れたいもちろん将来のプロジェクトのために！）。

ありがとう！

angularjsdrop-down-menuangular-ui-grid
19
laurenOlga

ここに記載されている組み込みの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>
7
Justin Fisher

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

7
Scott

私は最近同じ要件を抱えていましたが、私はそれを自分で理解しました。ここで私が従った手順です。 i-grid でフィルターを使用する場合は、既存のui-gridを使用するか、2つのアプローチを使用できます custom_filters またはヘッダーテンプレートを作成してグリッドにバインドします。 i-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)という関数を作成しました。これはフィルタリングロジックを処理します。ui-gridで関数を呼び出すと、通常の関数宣言が機能しないことに注意してください。 ui-gridには独自の 親スコープ があるためです。したがって、このように関数を呼び出す必要があります。

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

その後、コントローラの下で関数ロジックを宣言できます。

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

これが私の作業 例 です。

これが誰かに役立つことを願っています。

1
gihan

受け入れられた答えの拡張は、試行錯誤を通して発見したものです。 selectOptionsで正規表現を使用できます：

           columnDefs: [
            {
                name: 'starRating',
                headerCellClass: 'blue',
                headerTooltip: 'Star Rating',
                maxWidth: 100, 
                filter:
                {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: [
                        { value: /(THREE|FOUR|FIVE)/, label: 'Positive' },  // Here I wanted the user to be able to choose one option that would filter by several of the possible values in the data set
                        { value: /(ONE|TWO)/, label: 'Negative' },  // ...and Here
                        { value: 'ONE', label: '1' },
                        { value: 'TWO', label: '2' },
                        { value: 'THREE', label: '3' },
                        { value: 'FOUR', label: '4' },
                        { value: 'FIVE', label: '5' }
                    ]
                }
            },
0
Adam Hey