Question

我有大量的项目加载到“票证”对象中，我试图在页面上放置几个表 - 每个部门一个，所以我过滤了票证对象。我可以获得.length的门票总数，但我也需要每个部门的门票数量（这样我就可以使用ng-show来显示“没有找到门票！”如果特定部门没有门票。< / p>

我有plunkr“几乎”正在工作。正如您所看到的，有1张HR票，但“没有找到门票！”仍在显示

这是HTML：

<h3>Human Resources</h3>
    <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:'HR' }">
          <td>{{t.ID}}</td>
          <td>{{t.Title}}</td>
          <td>{{t.Department}}</td>
          <td>{{t.Status}}</td>
        </tr>
        <tr ng-show="countDepartment('HR') == 0">
          <td colspan="4"><b>No Tickets Found!</b></td>
        </tr>
      </tbody>
    </table>
    Human Resources: {{countDepartment('HR')}}
    <br />
    Total: {{tickets.length}}
    <br /><br />
    <hr />

JS文件：

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:'Support', 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'},
    // Test entries for the 'Other'
    {ID:'11', Title:'Network is very slow', Department:'Other', Status:'Pending'},
    {ID:'12', Title:'Night Attendant has my extension wrong', Department:'HR', Status:'Pending'},
    {ID:'13', Title:'Idea: We could use Twitter to advertise', Department:'Other', Status:'Pending'},
  ];

  // Default checked state.
  $scope.Department = {
    Marketing: false,
    Sales: false,
    Support: false,
    Management: false
  };

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

  $scope.countDepartment = function(val){
    var cnt = 0;
    for(c=0; c< $scope.tickets.length; c++){
      if($scope.tickets.Department == val){
        cnt = cnt+1;
      } // end if
    } // end for
    return cnt;
  };
}); // end main controller

Answer 1

您的countDepartment函数中存在错误。它应该是

$scope.countDepartment = function(val){
    var cnt = 0;
    for(c=0; c< $scope.tickets.length; c++){
      if($scope.tickets[c].Department == val){
        cnt = cnt+1;
      } // end if
    } // end for
    return cnt;
  };

请注意，第4行应引用$scope.tickets[c].Department而不是$scope.tickets.Department。

这是一种稍微更紧凑，更不易出错的方式来编写相同的功能：

$scope.countDepartment = function(val){
    var cnt = 0;
    angular.forEach($scope.tickets, function(value, key){
      if(value.Department == val)
        cnt++;
    });
    return cnt;
  };

Answer 2

沿着另一条路线走，您可以将过滤后的结果分配到ng-repeat表达式中的范围变量，如此...

<tr ng-repeat="t in HRtickets = (tickets | filter:{ Department:'HR' })">

然后可以在html的其他地方使用此变量，这样您就可以将ng-show表达式简单地更改为...

<tr ng-show="HRtickets.length == 0">

AngularJS：对象部分的计数和过滤

2 个答案: