如果选中复选框,我将显示列表的子集.我想用复选框旁边的X替换匹配选择条件的列表的计数.我有一个plunker,除了计数子集
here以外的所有功能.
我的控制器如下所示：
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',{
id: 1,name: 'Daredevil',fname: 'Jack',lname: 'Murdock',location: 'Court Room',{
id: 5,name: 'Flash',fname: 'Barry',lname: 'Allen',location: 'Speedline',{
id: 6,name: 'Hulk',lname: 'Banner',location: 'Labratory',{
id: 7,name: 'Hawkeye',fname: 'Clint',lname: 'Barton',location: 'Nest',{
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}}]
如果您的数据集是巨大的,而不是在getCount中使用过滤器,请使用forEach并一次填充每个类型的计数.
实际上,你根本不需要一个过滤器,在你的情况下使用过滤器来迭代相同的列表似乎效率很低.您的静态列表是将其分类到控制器本身.
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>
