AngularJS:对象局部的计数和过滤

AngularJS: Counting and Filtering on Object Partials

本文关键字：过滤 对象局 AngularJS      更新时间：2023-09-26

我有大量的项目加载到一个"票券"对象，我试图把几个表在页面上-每个部门一个，所以我过滤票券对象。我可以用。length获得票的总数，但我也需要每个部门的票的数量(这样我就可以使用ng-show来显示"没有票找到!"如果在特定的部门没有票。

我有一个"几乎"工作的活塞。正如你所看到的，有1张HR票，但是"No Tickets Found!"仍然显示

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

你的countDepartment函数有一个bug。应该是

$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;
  };

按照另一种方式，您可以将过滤后的结果分配给ng-repeat表达式中的作用域变量，如下所示…

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

这个变量可以在html的其他地方使用，所以你可以简单地将ng-show表达式更改为…

<tr ng-show="HRtickets.length == 0">
相关文章：