Angular JS Order By Filter 不适用于动态谓词

Question

我正在 Angular JS 中创建一个网格控件。 （出于某种原因，我不想使用 ng-grid、智能表等）

Plunkr 网址：http://plnkr.co/edit/arkCZcfXTIsW7sFCxisn?p=preview

在生成的表格顶部，我在组合框中填充了字段，以便允许用户搜索特定列 或作为免费搜索。

正如我从这里看到的： https://docs.angularjs.org/api/ng/filter/filter

对于免费搜索，我使用 {$:Value} 语法，对于基于列的搜索，我使用 {ColName:Value} 语法

但是，当我将列名绑定到组合框时，我无法让它工作。

我确实可以使用静态搜索 例如，如果我编写 {'Code':"1"}，则可以。但是如果我从组合框中获取“代码”，它就不起作用了。

在设置动态过滤器方面需要帮助。

这似乎也没有帮助。 angular filter with dynamic list of attributes to search

这是 HTML

     <div ng-controller="MyGrid">

            Search in Column
            <select ng-model="FilterByColumn" >

             <option value="$">All</option>

             <option ng-repeat="hdr in headers | orderBy : hdr.displayOrder" ng-show="hdr.isVisible" value="{{hdr.name}}" >

             {{hdr.caption}}

             </option>

            </select>

            Value : <input type="text" ng-model="searchKeyword" />
            <br />

            <a href="" ng-click="SetSort('')"> Remove Sort </a>
                <table>
                    <thead>
                        <tr>
                            <th ng-repeat="hdr in headers | orderBy : hdr.displayOrder" ng-show="hdr.isVisible">                            
                                <a href="" ng-click="SetSort(hdr.name)"> {{hdr.caption}} </a>                            
                            </th>
                        </tr>
                    </thead>
                    <tbody>                    
                        <%--<tr ng-repeat="dataVal in data | filter: {FilterByColumn : searchKeyword} | orderBy:predicate:reverse "> **Does not work--%>**
                        <%--<tr ng-repeat="dataVal in data | filter: {$ : searchKeyword} | orderBy:predicate:reverse "> **This works--%>**
                        <tr ng-repeat="dataVal in data | filter: GetFilter (FilterByColumn, searchKeyword)  | orderBy:predicate:reverse "> **<!-- Does not work -->**
                            <td ng-repeat="hdr in headers | orderBy : hdr.displayOrder" ng-show="hdr.isVisible">                                                    
                                {{dataVal[hdr.name]}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}} ; SearchBy = {{FilterByColumn}} ; Search Key : {{searchKeyword}} </pre>
            </div>

这是JS：

'use strict';
var MyApp = angular.module('MyApp', []);



MyApp.controller('MyGrid', function ($scope) {
    $scope.predicate = 'Code';
    $scope.reverse = false;
    $scope.FilterByColumn = '$';

    $scope.headers = [
    {
        "name": "Code",
        "caption": "Code",
        "isVisible": true,
        "displayOrder": 12
    },
{
    "name": "DispName",
    "caption": "My Name",
    "isVisible": true,
    "displayOrder": 1
},
{
    "name": "Locked",
    "caption": "Islocked",
    "isVisible": true,
    "displayOrder": 2
}
    ];

    $scope.data =
[{
    "Code": "1",
    "DispName": "abdul",
    "Locked": "0"
},

{
    "Code": "2",
    "DispName": "Hemant",
    "Locked": "0"
},

{
    "Code": "3",
    "DispName": "Rahul",
    "Locked": "0"
},

{
    "Code": "4",
    "DispName": "Sandy",
    "Locked": "0"
},

{
    "Code": "5 ",
    "DispName": "Nihal",
    "Locked": "0"
},

{
    "Code": "6",
    "DispName": "Sachin",
    "Locked": "0"
},

{
    "Code": "7",
    "DispName": "abdul f",
    "Locked": "0"
},

{
    "Code": "8",
    "DispName": "abdul g",
    "Locked": "0"
},

{
    "Code": "9",
    "DispName": "abdul h ",
    "Locked": "0"
},

{
    "Code": "10",
    "DispName": "abdul i",
    "Locked": "0"
}
];

    $scope.getValue = function (obj, PropName) {
        return obj[PropName];
    };

    $scope.SetSort = function (objName) {
        //alert(objName);
        $scope.predicate = objName;
        $scope.reverse = !$scope.reverse;
    };

    $scope.GetFilter = function (srchCol, Srchval) {
        //alert(srchCol);
        //alert(Srchval);
        if (srchCol == "") {
            return { $: Srchval };
        }
        else {
            return { srchCol: Srchval };
        }
    };


});

Answer 1

那是因为当你写{ srchCol: Srchval } - srcCol 是属性名称并且没有用变量srcCol 中的值替换时，请尝试以下语法：

$scope.GetFilter = function (srchCol, Srchval) {
        if (srchCol == "") {
            return { $: Srchval };
        }
        else {
            filter = {};
            filter[srchCol] = Srchval;
            return filter;
        }
    };