Question

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

EX：TypeX和TypeY是我select option中的过滤器，每列都属于类型。

Colum1 TypeX | Column2 TypeY | Column3 TypeX

data1 | data2 | DATA3

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

问题 - 这甚至可能吗？

我需要基于我收到的每个列具有不同类型的一些要求

真的很感谢你的帮助！

谢谢你， Nilesh制作

如果有帮助，这里是代码（不能按预期工作）。 编辑 - 这是我使用代码段工具创建的示例代码

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>

Answer 1

您可以使用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

动态列基于angularjs中的过滤器

1 个答案: