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

Question

I am trying to create a general table using element type custom directive that takes collection of data and generates the table header and create all the rows and columns of the table, then i tried to sort all the columns. 我试图使用元素类型自定义指令创建一个通用表，该指令接受数据收集并生成表头并创建表的所有行和列，然后尝试对所有列进行排序。 The part of this code is working fine. 该代码的一部分工作正常。 But my next goal is to apply the filter on all the columns of the table, as the data is dynamic so we cannot decide about the field to filter at run time. 但是我的下一个目标是将过滤器应用于表的所有列，因为数据是动态的，因此我们无法在运行时决定要过滤的字段。 The problem I diagnosed is that I am using ng-repeat="row in customers|filter:{$scope.searchkey:$scope.search}" . 我诊断出的问题是我正在使用ng-repeat="row in customers|filter:{$scope.searchkey:$scope.search}" 。 Here seems to be the problem because in then expression the first thing should be object but $scope returns object. 这似乎是问题所在，因为在表达式中，第一件事应该是对象，但是$ scope返回对象。

Following is my code. 以下是我的代码。

Index.html Index.html

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

script.js 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)
                  }


              }

          }
      };
  })

my-table-info.html my-table-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参数input到过滤器函数中。

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

问题描述

1 个解决方案

解决方案1
0 2014-07-07 13:13:44

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

问题描述

1 个解决方案

解决方案1 0 2014-07-07 13:13:44

解决方案1
0 2014-07-07 13:13:44