如何使用下拉列表过滤 AngularJS 中的网格

Question

我有一个 data-ng-grid，我想使用 <select>（下拉列表）过滤特定的列，但我似乎无法让它工作。我是 AngularJS 的新手，所以我可能做错了，但我的代码示例如下

HTML:

<div data-ng-controller="manualrecunreconciled as vm" class="form-horizontal">
<div class="form-group">
    <div class="col-sm-6">
        <select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="sourceNameSelected" ng-change="filterOptions.filterText = sourceNameSelected.type" class="form-control" style="width:100% !important">
            <option>All</option>
        </select>
    </div>
    <div class="col-sm-6 pull-right">
        <div class="input-group">
            <input class="form-control pull-right" type="text" name="SearchBox" data-ng-model="searchfilter" placeholder="Search for ..." />
            <span class="input-group-addon">
                <i class="fa fa-search" style="color: #555"></i>
            </span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="gridStyle" data-ng-grid="gridOptions" id="recoptions" style="height: 325px;"></div>
    </div>
</div>

控制器：

$scope.manualrecfilter = [
    'All',
    'P - Property',
    'I - Investment',
    'B - Both'
    ];
    $scope.sourceNameSelected = '';

    $scope.filterOptions = {
        filterText: "",
    };

    function updategridoptions() {
        $scope.gridOptions = {
            data: 'myData',
            rowHeight: 40,
            enableColumnResize: true,
            selectedItems: $scope.mySelections,
            plugins: [gridLayoutPlugin],
            totalServerItems: 'totalServerItems',
            columnDefs: [
                { field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
                { field: 'type', displayName: 'Type', width: 41 },
                { field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
                { field: 'reference', displayName: 'Reference', width: 162 },
                { field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
                { field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
            ],
            filterOptions: {
                filterOptions : $scope.filterOptions,
                useExternalFilter: true
            },

        };            
    }

选择该选项（无需单击任何按钮）时过滤器应该工作，我做错了什么？

Answer 1

找到了我可以使用的答案，但请注意，它会过滤所有匹配的列。

我将 HTML 中的 <select> 更新为：

<select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="filterOptions.filterText" class="form-control" style="width:100% !important">

并且我还将我的控制器更新为：

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

$scope.manualrecfilter = [
    'Prop',
    'Inv',
    'Both'
];

function updategridoptions() {
    $scope.gridOptions = {
        data: 'myData',
        rowHeight: 40,
        enableColumnResize: true,
        filterOptions: $scope.filterOptions,
        selectedItems: $scope.mySelections,
        plugins: [gridLayoutPlugin],
        totalServerItems: 'totalServerItems',
        columnDefs: [
            { field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
            { field: 'type', displayName: 'Type', width: 41 },
            { field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
            { field: 'reference', displayName: 'Reference', width: 162 },
            { field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
            { field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
        ]
    };            
}

如何使用下拉列表过滤 AngularJS 中的网格

How To Filter A Grid In AngularJS Using A Drop Down List

angularjs

ng-grid