Twój ng-if
będzie wywoływana w każdej pętli skrótu. Problem polega na tym, że zawiera wyrażenie zawierające wywołanie funkcji. Angular nie ma możliwości sprawdzenia, kiedy wynik wyrażenia może się zmienić, więc wywołuje go za każdym razem.
Lepszą opcją byłoby ustawienie flagi w każdym z kanałów i użycie ng-if do przetestowania odpowiedniej flagi. Następnie wystarczy zaktualizować flagi za każdym razem, gdy $scope.activeCategory
zmiany, które możesz wykonać za pomocą kodu, w którym ustawiasz kategorię, lub używając $scope.$watch()
aby uruchomić go automatycznie.
np.
$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;
}
}
Następnie w swoim szablonie:
<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>
powinien być bardziej wydajny.