Question

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

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

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

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

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

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

我确实得到静态搜索工作例如，如果我写{＆＃39;代码＆＃39;：＆＃34; 1＆＃34;}，这是有效的。但如果我采取＆＃34; Code＆＃34;从组合框中，它不起作用。

需要有关设置动态过滤器的帮助。

这个似乎也没有帮助。 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;
        }
    };

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

1 个答案: