Angular JS Order By Filter not working for dynamic predicates

Question

I am creating a Grid Control in Angular JS. ( I don't want to use ng-grid, smart table, etc for some reason)

Plunkr URL : http://plnkr.co/edit/arkCZcfXTIsW7sFCxisn?p=preview

On top of the table generated, i have populated fields in the combobox so that user is allowed to search on specific columns or as free search.

As I see From here : https://docs.angularjs.org/api/ng/filter/filter

For free search, I have used the syntax as {$:Value} and for column based search, {ColName:Value} syntax

However, I am unable to get it to work when I bind the column names to combobox.

I do get static search to work Eg if I write {'Code':"1"}, this works. but if I take "Code" from a combobox, it doesnt work.

Need help on setting dynamic filter.

This one also does not seem to help. angular filter with dynamic list of attributes to search

This is the 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>

This is the 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

That is because when you write { srchCol: Srchval } - srcCol is the property name and is not substituted with the value in variable srcCol, try this syntax instead:

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