ng-

Question

'dan daha fazla kez çağrılıyorsa, seçilen kategoriye bağlı olarak bazı kanalları filtrelemeye çalışıyorum.

$scope.hasCategory = function (categoryNameArray) { 
    console.log('thisisbeingcalled'); 
    var e = _.indexOf(categoryNameArray, $scope.activeCategory); 
    if (e === -1) { 
    return false; 
    } else { 
    return true; 
    } 
}; 

ve:

db.channels.find().pretty() 
{ 
    "_id" : "2kj9GK8jE9yHezoWb", 
    "name" : "example name", 
    "logo" : "path/to/image.svg", 
    "number" : 2, 
    "category" : [ 
     "Broadcast", 
     "Premium" 
    ], 
    "tags" : "example tag tags" 
} 

Bu ng -eğer işlemek için işlevdir:

Ben İşte bir ng-if="hasCategory(channel.category)

sahip belge var channel in channels bir ng tekrarı var etkin kategoriyi şu şekilde ayarladım:

$scope.setCategory = function (name) { 
    $scope.activeCategory = name; 
}; 

01 Ben görünümünde düğmesine tıklayarak göndermek

: Burada

<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> 

kitleri belge şema var: Ben sadece bu test etmek sadece bir kanal

Şimdi

db.kits.find().pretty() 
{ "_id" : "k7JFX6DHu5GYnyer3", "name" : "Broadcast", "order" : 1 } 
{ "_id" : "KrKRm4gysw5sfQnnr", "name" : "Premium", "order" : 2 } 
{ "_id" : "dieukQ3NRsA44CSns", "name" : "Ultimate", "order" : 3 } 

, ancak her seferinde ben tıklayın kategoriyi değiştirmek için düğmeye, işlevi, sayfanın başlangıcında bile defalarca kez çağırılır (ilk kez yükleme)

Geçerli kategorideki kanalları aramak için de bir arama çubuğum var, bunun da bundan etkilenip etkilenmediğinden emin değilim. Ben varken

<input type="text" ng-model="queryname" ng-model-options="{debounce: 500}"> 

Şimdi bu daha bir 100 kanal daha çok laggy alır ng-eğer uzunca bir süre sayfa donma yapar fazla 10k defa çağrılır.

Bu sorunu gidermek için neler yapabilirim? ng-if nerede

DÜZENLEME eklemek unuttum:

<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> 

Answer 1

Sizin ng-if her sindirmek döngü çağrılacak. Sorun, bir işlev çağrısını içeren bir ifade içermesidir. Açısal ifadenin, ifadenin sonucunun ne zaman değişebileceğini bilmesinin bir yolu yoktur, bu yüzden her zaman arar.

Daha iyi bir seçenek, her bir kanalda bir bayrak ayarlamak ve sadece ilgili bayrağı test etmek için ng-if komutunu kullanmak olacaktır. Ardından, kategoriyi ayarladığınız veya $scope.$watch()'u otomatik olarak tetiklemek için kullanabileceğiniz kodları $scope.activeCategory değiştirdiğinde her zaman bayrakları güncellemeniz gerekir.

örn. Ardından Şablonunuzdaki

$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> 

daha verimli olmalıdır.