对AngularJS中动态表的每一列应用过滤器答案

【问题标题】：Applying a filter on each column of the dynamic table in AngularJS对AngularJS中动态表的每一列应用过滤器
【发布时间】：2023-03-03 08:50:28
【问题描述】：

我正在尝试使用元素类型自定义指令创建一个通用表，该指令收集数据并生成表头并创建表的所有行和列，然后我尝试对所有列进行排序。此代码的一部分工作正常。但我的下一个目标是对表的所有列应用过滤器，因为数据是动态的，所以我们无法决定在运行时要过滤的字段。我诊断的问题是我使用的是ng-repeat="row in customers|filter:{$scope.searchkey:$scope.search}"。这似乎是问题所在，因为在 then 表达式中，第一件事应该是对象，但 $scope 返回对象。

以下是我的代码。

索引.html

<body>
<div> 
    <my-table input="Customers"></my-table>
    <br />
    <br />
    <br />
    <my-table input="Users"></my-table>
</div>
</body>

script.js

angular.module('DirectiveDemo', [])
  .controller('Controller', ['$scope', function ($scope) {
      $scope.Customers = [{ Name: "2Touqeer", Code: "2" },
                              { Name: "3Nadeem", Code: "3" },
                               { Name: "1Talha", Code: "1" },
                               { Name: "4Muslim Khan", Code: "4" }

      ];
      $scope.Users = [{ Name: "Touqeer", Code: "2", ID: "2Touqeer", CID: "CID1" },
                            { Name: "Nadeem", Code: "3", ID: "3Muslim", CID: "CID3" },
                             { Name: "Talha", Code: "1", ID: "1Nadeem", CID: "CID2" },
                             { Name: "Muslim Khan", Code: "4", ID: "1Talha", CID: "CID5" },
      { Name: "Khan", Code: "4", ID: "1Khan", CID: "CID78" }
      ];

  }])
  .directive('myTable', function () {
      return {
          restrict: 'E',
          transclude: true,
          scope: {
              customerInfo: '=input'
          },
          templateUrl: 'my-table-info.html',
          controller: function ($scope) {

              $scope.searchKey = 'CID';
              alert($scope.searchKey)
              $scope.reverseSort = false;
              $scope.search = '';
              $scope.List = [];
              $scope.order = function (item) {
                  $scope.orderByField = item;
                  alert($scope.search)
              }

              $scope.filterValue = function (itemKey,valueKey) {
                  $scope.searchKey = itemKey;
                  if (valueKey != 'undefined') {

                      $scope.search = valueKey;
                      alert($scope.search)
                  }


              }

          }
      };
  })

我的表格信息.html

<table ng-transclude>

    <thead class="GridHeaderItem ControlBorder">
    <tr>
        <th ng-repeat="(key, value) in customerInfo[0]">  <a href="#" ng-click="order(key); reverseSort = !reverseSort">
                   {{key}}
            <span  ng-show="orderByField==key">
                            <span ng-show="!reverseSort">
                                <i class="glyphicon-circle-arrow-up glyphicon"></i>
                            </span>
                            <span ng-show="reverseSort">
                                <i class="glyphicon-circle-arrow-down glyphicon"></i>
                            </span></span>
                </a></th>
    </tr>
        <tr class="ControlBorderRight ControlBorderTop ControlBorderBottom">
         <td class=" ControlBorderLeft ControlBorderBottom" ng-repeat="(key, value) in customerInfo[0]" >
             <input type="text"  style="width:100%;" ng-model="searchfilter"   ng-change="filterValue(key,searchfilter);"  />
             <!--ng-change="filter(key);"-->

         </td>
    </tr>
          </thead>
    <tr ng-repeat="row in customerInfo|filter:{co[row]:2}|orderBy:orderByField:reverseSort" class="ControlBorderRight ControlBorderTop ControlBorderBottom   ">

        <td ng-repeat="col in row" class=" ControlBorderBottom ControlBorderLeft Control LabelControl">{{col}}</td>
    </tr>
</table>

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

您应该构建一个自定义过滤器函数angular.module('myMod',[]).filter('myFilter',function(){ return function(input){...} })，然后您的重复应该如下所示：ng-repeat="row in customers | myFilter" - row 对象将作为 input 参数提供给过滤器函数。

【讨论】：

我是 Angularjs 的新手。我已经尝试了很多这样的方法，因为我正在使用自定义指令，所以它会造成混乱。如果可能的话，请让这个代码工作。我会非常感谢你。
当他们说：{{ expression | filter:argument1:argument2:... }} 他们并不意味着filter: 是其中的一部分，他们希望您将filter: 替换为要使用的过滤器的名称。即：{{ row in collection | myFilterName:param1ToSendToFilter:param12ToSendToFilter }} 如果你确实使用了{{ expression | filter:someParam }}，这意味着完全不同的东西，因为filter: 有它自己的特殊含义。
它将过滤器应用于所有行和所有列，但我需要将过滤器应用于一列的所有行。我想所以我没有明白你的意思。请如果你能做到或在小提琴上提供解决方案。
请记住，这是一个通用表，我们不知道集合，这就是为什么我无法决定在过滤函数“myFilterName”中做什么