通过过滤在AngularJS中隐藏子类别
Hiding a sub category in AngularJS with filtering
我有一个内容列表,它有两个级别。我的数据已经排序了,所以我只需要遍历它来显示它。这里是
Category 1
Subcategory1
Item1
Item2
Subcategory2
Item3
Item4
Subcategory3
Item5
Item6
Subcategory4
Item7
Item8
Category 2
Subcategory1
Item9
Item10
Subcategory2
Item11
Item12
等等。我还有一个文本过滤器,因此您可以输入文本,我的内容列表根据标题和标签进行过滤。这一切都很好。我想做的是,如果Item9和Item10被过滤器排除,则在类别2中隐藏子类别1。我有2500件商品,已经有点慢了。我想在它们被过滤时计数,而不是再次计数。这意味着当过滤器启动时,我需要重置我的列表,然后计算找到的项目。我有两个控制器,父控制器中有文本框,子控制器用于每个项,因为我认为这比使用过滤器要快(因为过滤器从DOM中删除内容)。我还不确定这是不是真的,我在试验。同时,这是在父控制器中:
$scope.doFilter = function()
{
for (var c = 0; c < $scope.categories.length; ++c)
{
var categoryId = $scope.categories[c].Id;
for (var r = 0; r < $scope.regions.length; ++r)
{
var regionId = $scope.regions[r].Id;
$scope.showRegions[String(categoryId) + String(regionId)] = 0;
}
}
$scope.$broadcast("triggerFilters", {});
}
然后这是子控制器中搜索方法的底部
if (!excluded)
{
var key = String($scope.item.CategoryId) + String($scope.region.Id);
if ($scope.$parent.showRegions[key] == null)
$scope.$parent.showRegions[key] = 0;
$scope.$parent.showRegions[key]++;
}
记住,每个元素都有这个子控制器的实例,就像这样(为了可读性,这是一个简化的版本):
<div data-ng-repeat="category in fullList">
<a>{{category.Name}}</a>
<div >
<div data-ng-repeat="region in regions | orderBy: 'Name'">
{{region.Name}}
<div >
<ul>
<li ng-controller="filterController" ng-hide="isExcludedByFilter"
data-ng-repeat="item in category.regions[region.Name].items | orderBy: 'Name'">
{{item.Name}}
</li>
</ul>
</div>
</div>
</div>
</div>
所以,当我在Chrome中设置断点时,我可以看到我收集的项目计数在增长。但是Chrome中的Angular检查器冻结了(也许是因为我有2500个控制器?)如果我在push 'search'时调用的方法上设置一个断点,那么集合又都是空的。因此,我尝试添加过滤器,但如果添加ng-hide,列表永远不会显示,因为集合总是空的,尽管它在搜索发生时填充。
我使用$parent,因为每个项目都有它自己的控制器,我认为如果你修改父项目,你会得到一个本地副本。所以,这是明显的工作,但值消失时,搜索结束,我不知道为什么。
好的,我整理好了。Angular在每个作用域的层次上维护变量,所以子作用域会继承一个值,但如果你在子作用域层次上改变了它,父作用域也不会改变,除非你使用了$scope.$parent。随着我对Angular的了解越来越多,我的项目也在不断发展。我并没有意识到在数据项的点上有两个嵌套的作用域。所以,我需要改变$scope。$parent,到$scope.$parent。父母,一切都很好。现在我只需要弄清楚为什么它这么慢.....
- 是否可以从父类访问子类的属性
- 子类访问父类's闭包变量
- Javascript关键字搜索子类Div值
- 如何通过Prototype或jquery移除子类的父类基类
- JavaScript数组的子类化破坏了快速枚举
- 可以“;超级“;可以在子类的方法内部使用,在不直接引用的情况下调用相应的超类方法
- 具有子类的构造函数中的Object.freeze
- JavaScript—父类和子类/对象的此问题
- Google Maps Javascript v3 自定义控件子类化标准控件
- 调用子类函数时调用的超类函数
- 在 Javascript 中更改 CSS 子类的值
- 子类化 Meteor.users() 以获得不同的用户类型
- 下划线扩展方法和结构.js子类
- 如何在 javascript 中从子类调用父方法
- 如何在单击父类的另一个子类时获取子类的值
- 寻址jquery ui手风琴子类
- 如果使用jQuery可以看到另一个span's的子类,则隐藏该类
- 如何使用jquery隐藏基于子类名的表行
- jQuery切换(隐藏/显示)子类
- 隐藏子类字段的Jquery表单验证