使用AngularJS ng类或替代方法的正确方法

问题描述：

我有一个项目，我想在同一个数组的不同过滤结果上显示多个计数。我这样做是有约束力的这是一个NG重复像这样里面：使用AngularJS ng类或替代方法的正确方法

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

有没有一种方法，我可以重新使用该结果，我想用结果在纳克级，但我只能通过运行如下所示的相同查询来执行此操作：

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

是否有更简单更有效的方法来执行此操作？

Here is the JSFiddle example

如果你升级你的角度版本，你可以使用'变量表达式作为alias_expression'语法。然后可以在'ng-class'中使用'alias_expression'而不重复过滤表达式。 [见手册]（https://docs.angularjs.org/api/ng/directive/ngRepeat） – Yoshi 2014-10-06 11:39:50

答

从视图中移动过滤器控制器：

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

答

更简单的方法是做像@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中，如果我记得正确。

使用AngularJS ng类或替代方法的正确方法

相关推荐