如果选中了复选框，我将显示列表的子集。我想将复选框旁边的X替换为与选择标准匹配的列表的计数。我有一个笨拙的人，除了在这里计算子集之外，什么都做。
我的控制器如下所示：
var app = angular.module('app', []); app.controller('MainController', function($scope){ $scope.cbMarvel = true; $scope.cbDCComics = true; $scope.heroes = [ { id: 1, name: 'Iron Man', fname: 'Tony', lname: 'Stark', location: 'Stark Tower', comic: 'Marvel' }, { id: 2, name: 'Batman', fname: 'Bruce', lname: 'Wayne', location: 'Bat Cave', comic: 'DC' }, { id: 3, name: 'Superman', fname: 'Clark', lname: 'Kent', location: 'Metroplis', comic: 'DC' }, { id: 1, name: 'Daredevil', fname: 'Jack', lname: 'Murdock', location: 'Court Room', comic: 'Marvel' }, { id: 5, name: 'Flash', fname: 'Barry', lname: 'Allen', location: 'Speedline', comic: 'DC' }, { id: 6, name: 'Hulk', fname: 'Bruce', lname: 'Banner', location: 'Labratory', comic: 'Marvel' }, { id: 7, name: 'Hawkeye', fname: 'Clint', lname: 'Barton', location: 'Nest', comic: 'Marvel' }, { id: 8, name: 'Thor', fname: 'Donald', lname: 'Blake', location: 'Asgard', comic: 'Marvel' } ]; });
我的看法如下所示：
<!DOCTYPE html> <html ng-app="app"> <head> <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> <script data-require="jquery@2.0.3 current" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script> <script data-require="angular-ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="MainController"> <fieldset> <legend>Comments Log</legend> <div class="row"> <div class="col-md-4"> <input type="checkbox" ng-model="cbMarvel"/> Marvel [X] </div> <div class="col-md-4"> </div> <div class="col-md-4"> <input type="checkbox" ng-model="cbDCComics"/> DC Comics [X] </div> </div> <div class="row"> </div> <div class="row col-md-10"> <div ng-if="heroes.length == 0"><b>No Heroes Found!</b> </div> <div ng-repeat="h in heroes | filter:{comic:'Marvel'}" ng-show="cbMarvel"> {{ h.name}} - {{h.comic}} </div> <div ng-repeat="h in heroes | filter:{comic:'DC'}" ng-show="cbDCComics"> {{ h.name}} - {{h.comic}} </div> </div> </fieldset> </body> </html>
您可以在绑定数据时在视图模型本身中设置该计数，或者在作用域上只有一个返回计数的方法。
app.controller('MainController', function($scope, filterFilter){ .... $scope.getCount = function(strCat){ return filterFilter( $scope.heroes, {comic:strCat}).length; } ... });
并将其用作：-
Marvel [{{getCount("Marvel")}}] ..... DC Comics [{{getCount("DC")}}]
普伦克
如果您在页面上时列表不变，我建议您找出长度并将其绑定到视图模型本身的属性中，然后在视图中使用它。
//Set your data model $scope.cbMarvel = {value:true, count:getCount('Marvel')}; $scope.cbDCComics = {value:true, count:getCount('DC')};
在你看来
<input type="checkbox" ng-model="cbMarvel.value"/> Marvel [{{cbMarvel.count}}]
Plnkr2
如果您的数据集很大，请使用forEach并立即填充每种类型的计数，而不是在getCount中使用过滤器。
实际上，您根本不需要过滤器，在这种情况下，使用过滤器遍历同一列表似乎效率很低。您的列表是静态列表，因此请在控制器本身中对其进行分类。
var comics = $scope.comics = {}; //Dictionary of comics //Create the collection here. angular.forEach(heroes, function(itm){ if(!comics[itm.comic]){ comics[itm.comic] = {name:itm.comic, value:true, count:1, items:[itm] }; return; } comics[itm.comic].count++; //Incr count comics[itm.comic].items.push(itm); //push specific item });
并删除您视图中的所有过滤器，然后执行以下操作：
<div ng-repeat="h in comics.Marvel.items" ng-show="comics.Marvel.value"> {{ h.name}} - {{h.comic}} </div> <div ng-repeat="h in comics.DC.items" ng-show="comics.DC.value"> {{ h.name}} - {{h.comic}} </div>
Plnk3-更好的一个
