Question

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

以下是我的代码。

的index.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)
                  }


              }

          }
      };
  })

我的表-在info.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>

Answer 1

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

在AngularJS中的动态表的每一列上应用过滤器

1 个答案: