Question

我有一个项目，我想在同一个数组的不同过滤结果上显示多个计数。我这样做的是一个绑定，它在ng-repeat里面，如下所示：

{{ (queue | filter: {doctorName:d.doctorName} | filter: {status:'Scheduled'}).length }}

有没有办法可以重复使用该结果，我想在ng-class中使用结果，但我只能通过运行相同的查询来实现：

ng-class="(queue | filter: {doctorName:d.doctorName} | filter: {status:'Scheduled'}).length ? 'showHint' : 'hideHint'"

有更简单有效的方法吗？

Here is the JSFiddle example

Answer 1

更简单的方法就像@origonof建议的那样。

但是，如果您只想为每位医生进行一次计算，则可以使用Controller作为语法。

我修改了您的示例http://jsfiddle.net/krausekjaer/4yfwckzv/7/

这是我添加的控制器：

docApp.controller('DocterController', function ($scope, $filter) {
   var self = this;
   self.docQueue = $filter('filter')($scope.queue, {doctorName: $scope.d.doctorName});  
});

它可以在像这样的HTML中使用

<div ng-controller="DocterController as docCtrl">
  <div>{{ d.doctorName }}</div>
  <div ng-class="(docCtrl.docQueue | filter: {status:'Scheduled'}).length ? 'showHint' : 'hideHint'">
    Bookings: {{ (docCtrl.docQueue | filter: {status:'Scheduled'}).length }}
  </div>
  <div ng-class="(docCtrl.docQueue | filter: {status:'Waiting'}).length ? 'showHint' : 'hideHint'">
    Queue: {{ (docCtrl.docQueue | filter: {status:'Waiting'}).length }}
  </div>
  <div ng-class="(docCtrl.docQueue | filter: {status:'Served'}).length ? 'showHint' : 'hideHint'">
    Active: {{ (docCtrl.docQueue | filter: {status:'Served'}).length }}
  </div>
</div>

注意我将角度更新为永不版本，如果我记得正确的话，控制器作为功能也应该出现在2.0中。

Answer 2

将过滤器从视图移动到控制器：

myApp.controller('myControllerNameCtrl', function($scope, $filter) {
  $scope.queue = ...;
  var firstFilter = $filter('firstFilter')(queue, {doctorName: d.doctorName});
  var secondFilter = ...;
  $scope.filteredQueue = secondFilter;
});

正确使用AngularJS ng-class或替代方法

2 个答案: