Question

您好我是角度新手，我使用ng-grid来显示一组表格数据。我最近面临的问题是我需要一个外部过滤器，这是一个选择下拉列表，因此根据所选值，我需要过滤我的数据网格，我搜索了很多，但无法获得任何解决方案。任何帮助将不胜感激。我甚至尝试了@cObra的这个解决方案How to filter my data? (ng-grid)，但没有成功。

这是我的代码

<select id="source" style="margin:5px" ng-model="sourceNameSelected"
ng-options="source.sourceName for source in lstsource.sources">
<option value="" selected>
 -- Select Source --
 </option>
</select>
<div id="leftJobManagerInfo" class="span8" >
<!-- <input type="text" ng-model="filterOptions.filterText" > -->

<div class="gridStyle" ng-grid="gridOptions" ng-controller="JobManagerController as jobManager" ></div>
</div>

控制器中的

$scope.gridOptions = { 

            data: 'jobs',
            enablePaging:true,
            columnDefs:[{field:"jobId",displayName:"Id",visible: false},
                     {field:"fileName",displayName:"File"},
                     {field:"sourceId",visible: false},
                     {field:"sourceName",displayName:"Source"},
                     {field:"groupId",visible:false},
                     {field:"groupName",displayName:"Group"},
                     {field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
                     {field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
                     {field:"trigger",displayName:"Trigger"},
                     {field:"triggerBy",displayName:"Trigger By"},
                     {field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
                     {field:"server",displayName:"Server"}],
              filterOptions: {filterText: '',useExternalFilter: true},

        };

我还尝试保留一个隐藏的输入元素并将其绑定到filterText，就像这样

<input type="hidden" ng-model="filterOptions.filterText" ng-init="filterOptions.filterText=sourceNameSelected.sourceName">

但没有奏效。非常感谢。

Answer 1

试试这个：

首先将您的选择框移动到您拥有网格的同一控制器的范围内
在选择框的chnage上重置filterOptions.filterText（如果需要，您也可以将它直接分配给选择框的ng模型）

<强> HTML

<div id="leftJobManagerInfo" class="span8" ng-controller="JobManagerController">
    <select id="source" style="margin:5px" ng-model="sourceNameSelected" ng-options="source.sourceName for source in lstsource.sources" ng-change="filterOptions.filterText = sourceNameSelected.sourceName">
        <option value="" selected>
            -- Select Source --
        </option>
    </select>
<!-- <input type="text" ng-model="filterOptions.filterText" > -->

<div class="gridStyle" ng-grid="gridOptions"></div>
</div>

JobManagerController控制器

$scope.lstsource = //put your select box options list here
$scope.sourceNameSelected='';

$scope.filterOptions = {
   filterText: ''
};

$scope.gridOptions = { 

        data: 'jobs',
        enablePaging:true,
        columnDefs:[{field:"jobId",displayName:"Id",visible: false},
                 {field:"fileName",displayName:"File"},
                 {field:"sourceId",visible: false},
                 {field:"sourceName",displayName:"Source"},
                 {field:"groupId",visible:false},
                 {field:"groupName",displayName:"Group"},
                 {field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
                 {field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
                 {field:"trigger",displayName:"Trigger"},
                 {field:"triggerBy",displayName:"Trigger By"},
                 {field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
                 {field:"server",displayName:"Server"}],
          filterOptions: {
                filterOptions : $scope.filterOptions,
                useExternalFilter: true
          },

    };

希望它可以帮助你：）

使用select的Ng-grid外部过滤器

1 个答案: