问题描述
我正在尝试根据所选类别过滤一些频道.
I'm trying to filter some channels depending on the selected category.
我有一个 channel in channels
的 ng-repeat,它有一个 ng-if="hasCategory(channel.category)
I have an ng-repeat of channel in channels
which has an ng-if="hasCategory(channel.category)
文档如下:
db.channels.find().pretty()
{
"_id" : "2kj9GK8jE9yHezoWb",
"name" : "example name",
"logo" : "path/to/image.svg",
"number" : 2,
"category" : [
"Broadcast",
"Premium"
],
"tags" : "example tag tags"
}
这是处理ng-if的函数:
This is the function to handle the ng-if:
$scope.hasCategory = function (categoryNameArray) {
console.log('thisisbeingcalled');
var e = _.indexOf(categoryNameArray, $scope.activeCategory);
if (e === -1) {
return false;
} else {
return true;
}
};
这就是我设置活动类别的方式:
and this is how I set the active category:
$scope.setCategory = function (name) {
$scope.activeCategory = name;
};
我通过单击视图中的按钮发送:
which I send by clicking the button in the view:
<section layout="row" layout-align="center center" layout-wrap ng-init="activeIndex; activeCategory">
<md-button flex="auto" flex-sm="45" flex-xs="100" ng-repeat="kit in kits | orderBy: 'order'" ng-class="{active: (activeIndex.index == $index)}" class="md-raised">
<a href="" ng-click="activeIndex.index = $index; setCategory(kit.name);" class="bold">{{kit.name}}</a>
</md-button>
</section>
这是工具包文档架构:
db.kits.find().pretty()
{ "_id" : "k7JFX6DHu5GYnyer3", "name" : "Broadcast", "order" : 1 }
{ "_id" : "KrKRm4gysw5sfQnnr", "name" : "Premium", "order" : 2 }
{ "_id" : "dieukQ3NRsA44CSns", "name" : "Ultimate", "order" : 3 }
现在我只有一个频道来测试这一点,但每次我点击按钮更改类别时,即使在页面启动时也会多次调用 $scope.hasCategory
函数(第一次加载)
Now I only have one channel to test this out, but each time I click the button to change the category, the $scope.hasCategory
function gets called multiple times even at the startup of the page (first time loading)
我还有一个搜索栏来搜索当前类别中的频道,我不确定这是否也会影响到这一点.
I also have a search bar to search for channels in the current category, I'm not sure if that affects this as well.
<input type="text" ng-model="queryname" ng-model-options="{debounce: 500}">
现在当我有超过 100 个频道时这会变得非常滞后,ng-if 被调用超过 10k 次,这使得页面冻结了很长一段时间.
Now this gets really laggy when I have more than a 100 channels, the ng-if gets called more than 10k times, which makes the page freeze for quite a while.
我该怎么做才能解决这个问题?
What can I do to fix this issue?
编辑
忘记添加 ng-if
的位置:
<md-card flex="15" flex-xs="40" class="slide-up" layout="column" ng-repeat="channel in channels | orderBy: 'number' | filter: queryname" ng-if="hasCategory(channel.category)" ng-init="channel.edit = false">
<md-card-header ng-show="channel.edit == false">
<img ng-src="{{channel.logo}}" alt="">
</md-card-header>
<md-card-header-text ng-show="channel.edit == false">
<span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
</md-card-header-text>
</md-card>
推荐答案
您的 ng-if
将在每个摘要循环中调用.问题在于它包含一个涉及函数调用的表达式.Angular 无法知道表达式的结果何时可能发生变化,因此每次都会调用它.
Your ng-if
will be called on every digest loop. The problem is that it contains an expression involving a function call. Angular has no way to know when the result of the expression might change, so it calls it every time.
更好的选择是在每个通道中设置一个标志并使用 ng-if 来测试相关标志.然后,您只需在 $scope.activeCategory
更改时更新标志,您可以使用设置类别的代码或使用 $scope.$watch()
自动触发.
A better option would be to set a flag in each of the channels and use ng-if to just test the relevant flag. Then you just have to update the flags whenever $scope.activeCategory
changes which you can either do with code where you set the category or using $scope.$watch()
to trigger it automatically.
例如
$scope.setCategory = function (name) {
$scope.activeCategory = name;
for (var index=0; index < $scope.channels.length; index++) {
$scope.channels[index].hasCategory = hasCategory($scope.channels[index].category, name);
}
};
function hasCategory(categoryNameArray, name) {
console.log('thisisbeingcalled');
var e = _.indexOf(categoryNameArray, name);
if (e === -1) {
return false;
} else {
return true;
}
}
然后在您的模板中:
<md-card flex="15" flex-xs="40" class="slide-up" layout="column"
ng-repeat="channel in channels | orderBy: 'number' | filter: queryname"
ng-if="channel.hasCategory"
ng-init="channel.edit = false">
<md-card-header ng-show="channel.edit == false">
<img ng-src="{{channel.logo}}" alt="">
</md-card-header>
<md-card-header-text ng-show="channel.edit == false">
<span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
</md-card-header-text>
</md-card>
应该更有效率.
这篇关于ng-if 被调用的次数多于它应该调用的次数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!