链接到JSBin：bin
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>
<body>
<div ng-app="search" ng-controller="SearchPortletController">
<div id="filters">
<h3>Refine By <span class="pull-right glyphicon glyphicon-refresh"></span></h3>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#filter-body-1">Document Type</a>
</h4>
</div>
<div id="filter-body-1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Document Type']['R & D Report']">R & D Report</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Document Type']['Roadmap']">Roadmap</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Document Type']['Technical Paper']">Technical Paper</label>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#filter-body-3">Export Control</a>
</h4>
</div>
<div id="filter-body-3" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Export Control']['EU']">EU</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Export Control']['US']">US</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Export Control']['None']">None</label>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#filter-body-4">Author</a>
</h4>
</div>
<div id="filter-body-4" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Author']['Company Author']">Company Author</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Author']['John A. Davis']">John A. Davis</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="selectedFilters['Author']['An Author']">An Author</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="results" class="col-md-8">
<div class="result" ng-repeat="result in internalResults.results | filterByCategory: selectedFilters">
<div class="row">
<div class="result-media col-sm-4" ng-if="result.mediaUrl">
<img class="img-responsive" ng-src="{{result.mediaUrl}}">
</div>
<div class="result-content" ng-class="result.mediaUrl ? 'col-sm-8' : 'col-sm-12'">
<h4 class="result-title">
<a href="#">{{result.title}}</a>
<span class="glyphicon glyphicon-eye-open"></span>
</h4>
<ul class="list-inline">
<li class="author"><span class="glyphicon glyphicon-user"></span> {{result.author}}</li>
<li class="desc"><span class="glyphicon glyphicon-info-sign"></span> Description</li>
</ul>
<ul class="list-inline">
<li class="date-published"><span class="glyphicon glyphicon-time"></span> {{result.dated}}</li>
<li class="comments"><span class="glyphicon glyphicon-comment"></span> 10 comments</li>
<li class="tags">
<span class="glyphicon glyphicon-tags"></span>
<span ng-repeat="tag in result.tags">{{tag}}</span>
</li>
</ul>
<p class="desc">{{result.desc}}</p>
<ul class="list-inline">
<li class="type">
Type
<br> {{result.documentType}}
</li>
<li class="classification">
Classification
<br> {{result.classification}}
</li>
<li class="ec">
Export Control
<br> {{result.exportControl}}
</li>
</ul>
</div>
</div>
<hr>
</div>
</div>
</div>
<script>
var searchPortlet = angular.module('search', []);
searchPortlet.filter('filterByCategory', function() {
return function(results, filters) {
if (!angular.equals(filters, {})) {
var filteredResults = [];
angular.forEach(results, function(result) {
for (var filter in filters) {
//console.log(filter);
for (key in filters[filter]) {
//console.log(filters);
//console.log(filters[filter]);
//console.log(toCamelCase(filter));
//console.log(key);
//console.log(filters[filter][key]);
if (filters[filter][key]) {
if (result[toCamelCase(filter)] == key) {
filteredResults.push(result);
}
}
}
}
});
return filteredResults;
} else {
return results;
}
}
});
function toCamelCase(sentenceCase) {
var out = "";
sentenceCase.split(" ").forEach(function(el, idx) {
var add = el.toLowerCase();
out += (idx === 0 ? add : add[0].toUpperCase() + add.slice(1));
});
return out;
}
searchPortlet.controller('SearchPortletController', ['$scope', function($scope) {
$scope.selectedFilters = {};
$scope.internalResults = {
"results": [{
"title": "Engine Design",
"author": "John A. Davis",
"dated": "19-Apr-2017",
"tags": ["Engine Design", "Project Proposal"],
"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"documentType": "Project Proposal",
"classification": "Internal",
"exportControl": "None"
}, {
"title": "Aerodynamics Analysis",
"author": "An Author",
"dated": "30-Mar-2017",
"tags": ["Project Proposal"],
"desc": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.",
"documentType": "Technical Paper",
"classification": "Internal",
"exportControl": "EU"
}, {
"title": "Automobile Design",
"author": "Karthikeyan",
"dated": "28-Apr-2017",
"tags": ["Engine Design", "Project Proposal"],
"desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.",
"documentType": "R & D Report",
"classification": "Internal",
"exportControl": "US"
}, {
"title": "Engine Design",
"author": "John A. Davis",
"dated": "19-Apr-2017",
"tags": ["Engine Design", "Project Proposal"],
"desc": "Quick Brown Fox Jumps Over Lazy Dog",
"documentType": "Roadmap",
"classification": "Internal",
"exportControl": "US"
}, {
"title": "Seat Arrangement",
"author": "Company Author",
"dated": "19-Apr-2017",
"tags": ["Engine Design", "Project Proposal"],
"desc": "Lorem ipsum dolor sit amet.",
"documentType": "Project Proposal",
"classification": "Internal",
"exportControl": "None"
}]
};
}]);
</script>
</body>
</html>
我有一组复选框可以过滤一些内容。我可以使用文档类型，导出控制，作者中的一个组进行过滤，但它们不能一起工作。此外，当清除所有复选框时，不会显示所有没有过滤器的内容。
请帮助我。