我一直在努力让我的 Angular 应用程序在未选择过滤器的情况下显示所有结果。我在这里查看了类似的问题,但由于某种奇怪的原因,他们的答案不适用于我的申请。
我最初让它工作,但是在应用过滤器并删除后,没有显示任何数据。
我的工作演示位于以下JS Fiddle
我的 HTML
<div ng-controller="MyCtrl">
<h4>Industries</h4>
<div ng-init="group = (industries | groupBy:'industry_id')" style="width:100%">
<div ng-repeat="ind in industries" style="width:100px; float:left;">
<b><input type="checkbox" ng-model="useIndustries[$index]"/>{{ind.industry_name}}</b>
</div>
</div>
<br>
<h4>Types</h4>
<div ng-init="group2 = (types | groupBy:'industry_type_id')" style="width:100%">
<div ng-repeat="type in types" style="width:100px;float:left;">
<b><input type="checkbox" ng-model="useTypes[$index]"/>{{type.type_name}}</b>
</div>
</div>
<div style="clear:both;"></div>
<div>
<ul>
<li ng-repeat="est in establishments | filter:(!!filterIndustries() || undefined) && filterIndustries()"><p><b>{{est.est_name}} - {{est.industry_id}} - {{est.industry_type_id}}</b></p></li>
</ul>
</div>
我的JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, filterFilter) {
$scope.useIndustries = [];
$scope.useTypes = [];
$scope.filterIndustries = function () {
return function (p) {
if ($scope.useIndustries.length > 0) {
for (var i in $scope.useIndustries) {
if ((p.industry_id == $scope.group[i] && $scope.useIndustries[i])) {
return true;
}
}
}
if ($scope.useTypes.length > 0) {
for (var i in $scope.useTypes) {
if (p.industry_type_id == $scope.group2[i] && $scope.useTypes[i]) {
return true;
}
}
}
};
};
$scope.industries = [
{ industry_name: "Italian", industry_id: 1},
{ industry_name: "Indian", industry_id: 2},
{ industry_name: "Spanish", industry_id: 3}
];
$scope.types = [
{ type_name: "Eat-In", industry_type_id: 1},
{ type_name: "Fast Food", industry_type_id: 2},
{ type_name: "Takeout", industry_type_id: 3}
];
$scope.establishments = [
{est_name: 'Luigis Pizza Kitchen', industry_id: 1, industry_type_id:2},
{est_name: 'Pizza Plus', industry_id: 1, industry_type_id:1},
{est_name: 'Authentic Mexican Grill', industry_id: 3, industry_type_id:1},
{est_name: 'Tacos R Us', industry_id: 3, industry_type_id:3},
{est_name: 'Taste Of India', industry_id: 2, industry_type_id:1},
{est_name: 'Indian Food Emporium', industry_id: 2, industry_type_id:3}
];
}
var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
我已经为此工作了一段时间,并且很好奇是否有人能看到任何导致此功能无法“正常”运行的明显问题。我意识到这一定是我的错误。我对 Angular 的了解充其量是最少的。
我真诚地感谢任何有关此主题的帮助。
最佳答案
您必须先归还集合,然后检查所有元素是否已被移除。
过滤
$scope.filterIndustries = function () {
return function (p) {
if ($scope.useIndustries.length == 0 && $scope.useTypes.length == 0) {
return p;
}
var isShowAll = true;
if ($scope.useIndustries.length > 0) {
for (var i in $scope.useIndustries) {
if ((p.industry_id == $scope.group[i] && $scope.useIndustries[i])) {
return true;
}
if($scope.useIndustries[i]){
isShowAll = false;
}
}
}
if ($scope.useTypes.length > 0) {
for (var i in $scope.useTypes) {
if (p.industry_type_id == $scope.group2[i] && $scope.useTypes[i]) {
return true;
}
if($scope.useTypes[i]){
isShowAll = false;
}
}
}
if(isShowAll)
return p;
};
};
关于javascript - 未提供过滤器时 Angular 显示全部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30701988/