Question

我正在尝试根据4个复选框的值过滤表格中行的显示 - 当原始规格声明它只是四个值中的一个（我使用了单选按钮）但我在审查它被更改为四个的任意组合 - 如果选中，则显示相应的行，如果未选中，则不会。我不知道怎么从这里到达那里。

这是HTML：

<body style="padding:20px;">
    <input type="checkbox" name="Marketing" ng-model="Department" /> Marketing&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="Sales" ng-model="Department" /> Sales&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="Support" ng-model="Department" /> Support&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="Management" ng-model="Department" /> Management

    <table class="table table-striped">
      <tbody>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Department</th>
          <th>Status</th>
        </tr>
        <tr ng-repeat="t in tickets | filter:{Department: t.Department}">
          <td>{{t.ID}}</td>
          <td>{{t.Title}}</td>
          <td>{{t.Department}}</td>
          <td>{{t.Status}}</td>
        </tr>
      </tbody>
    </table>
  </body>

这是脚本：

var app = angular.module('app', []);

app.controller('MainController', function($scope){
      $scope.tickets = [
        {ID:'1', Title:'Kick Off Summer Campaign', Department:'Marketing', Status:'In Progress'},
        {ID:'2', Title:'Attend SummerConn', Department:'Sales', Status:'In Progress'},
        {ID:'3', Title:'Replace Ticketing Software', Department:'Support', Status:'In Progress'},
        {ID:'4', Title:'Read "The Salesman Within"', Department:'Sales', Status:'In Progress'},
        {ID:'5', Title:'Send Email 020', Department:'Marketing', Status:'In Progress'},
        {ID:'6', Title:'Refactor Training', Department:'Support', Status:'In Progress'},
        {ID:'7', Title:'Hire Call Center Coordinator', Department:'Management', Status:'In Progress'},
        {ID:'8', Title:'Send Email 044', Department:'Marketing', Status:'In Progress'},
        {ID:'9', Title:'Organize Convention Booths', Department:'Sales', Status:'In Progress'},
        {ID:'10', Title:'Send Email 123', Department:'Marketing', Status:'In Progress'},
      ];

    }); // end main controller

这是plunkr

提前致谢!!!

Answer 1

您可以利用以下事实：您可以向filter提供谓词函数，并将每个复选框ng-model映射到单独的值，然后您可以在谓词中使用这些值。

$scope.checked = function(val) {
    return $scope.Department[val.Department];
};

这是示范Plunker。

很高兴有帮助。

Answer 2

如果必须按状态排序，那么最好的解决方案可能就是在控制器中创建一个单独的filteredTickets对象，当复选框发生变化时，该对象会更新。使用ng-repeat而不使用filter表达式。

AngularJS：在任何复选框组合上的过滤表

2 个答案: