Angular JS Order By Filter不適用於動態謂詞

Question

我正在Angular JS中創建一個Grid Control。 （我不想用NG-電網，智能表等出於某種原因）

Plunkr URL：在下拉列表http://plnkr.co/edit/arkCZcfXTIsW7sFCxisn?p=preview

上生成的桌子上，我已填充字段，以便用戶允許搜索特定列 或免費搜索。

當我從這裏看到： https://docs.angularjs.org/api/ng/filter/filter

對於免費搜索，我已經使用的語法爲{$：值}和基於列的搜索，{COLNAME：值}語法

然而，當我將列名綁定到組合框時，我無法使它工作。

我做靜態搜索工作例如，如果我寫{'​​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; 
     } 
    };