基于angularjs中过滤器的动态列

debugcn 发表于 Dev

尼莱什

我有一个X列数的要求。这些列使用ng-repeat TH和TD呈现。我想做的是过滤列**（而不是行）**

例如：TypeX和TypeY是我在中的过滤器select option，每列都属于Type。

Colum1 TypeX | Column2 TypeY | Column3 TypeX

data1 | 数据2 | 数据3

如果我用TypeX过滤上表，我只想看Column1和Column3

问题-这甚至可能吗？

根据收到的一些要求，我需要这样做，其中每一列都有不同的类型

非常感谢您的帮助！

谢谢你，尼罗什

如果有帮助，请参见以下代码（无法正常工作）。编辑-这是我使用代码片段工具创建的示例代码

var app = angular.module("test", []);
app.controller("myTest", function($scope) {
  //$scope.tableData = ['data', 'data', 'data', 'data', 'data', 'data'];
  $scope.tableData = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6'];
  $scope.tableColumns = ['Column1', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6'];
  $scope.typesList = ['TypeX', 'TypeX', 'TypeY', 'TypeY', 'TypeX', 'TypeY'];
  $scope.types = ["TypeX", "TypeY"];
});

//

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="test">
<div ng-controller="myTest">
  <div>
    <div>
      <span>Filter Type:</span> 
      <select ng-model="testFilter">
        <option value="">--type--</option>
        <option ng-repeat="t in types" value="{{t}}">{{t}}</option>
      </select>
    </div>
    <table border="1">
      <tr>
        <th ng-repeat="c in tableColumns | filter:testFilter">{{c + " " + typesList[($index + 1) - 1]}}</th>
      </tr>
      <tr>
        <td ng-repeat="d in tableData  | filter:testFilter">{{d + " " + typesList[($index + 1) - 1]}}</td>
      </tr>
    </table>
  </div>
</div>

</html>

玛丽安·班（Marian Ban）

您可以使用ng-if代替filter：

    <div>
      <div>
        <span>Filter Type:</span>
        <select ng-model="testFilter">
          <option value="">--type--</option>
          <option ng-repeat="t in types" value="{{t}}">{{t}}</option>
        </select>
      </div>
      <table border="1">
        <tbody>
          <tr>
            <th ng-repeat="c in tableColumns" ng-if="!testFilter || typesList[$index] == testFilter">{{c + " " + typesList[($index + 1) - 1]}}</th>
          </tr>
          <tr>
            <td ng-repeat="d in tableData" ng-if="!testFilter || typesList[$index] == testFilter">{{d + " " + typesList[($index + 1) - 1]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

http://plnkr.co/edit/vNjJJAY6P2fpNDCi2FAO?p=preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。