एनजी-अगर इसे

Question

से अधिक बार कहा जा रहा है, तो मैं चयनित श्रेणी के आधार पर कुछ चैनल फ़िल्टर करने की कोशिश कर रहा हूं।

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

और:

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="hasCategory(channel.category)

है यहाँ दस्तावेज़ है channel in channels के एनजी-दोहराने है इस प्रकार मैंने सक्रिय श्रेणी सेट की है:

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

जो मैं ध्यान में रखते हुए बटन पर क्लिक करके भेजें:

<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 फ़ंक्शन को पृष्ठ के स्टार्टअप पर पहली बार भी कॉल किया जाता है (पहली बार लोड हो रहा है)

मेरे पास वर्तमान श्रेणी में चैनलों की खोज करने के लिए एक खोज बार भी है, मुझे यकीन नहीं है कि इससे यह भी प्रभावित होता है। मैं जब

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

अब यह वास्तव में laggy हो जाता है एक 100 चैनलों की तुलना में अधिक, एनजी-यदि एक से अधिक 10k बार है, जो काफी देर के लिए पेज फ्रीज बनाता है कहा जाता हो जाता है।

इस समस्या को हल करने के लिए मैं क्या कर सकता हूं?

संपादित

जहां 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> 

Answer 1

आपका ng-if हर पचाने पाश पर बुलाया जाएगा। समस्या यह है कि इसमें फ़ंक्शन कॉल शामिल एक अभिव्यक्ति होती है। कोणीय के पास यह जानने का कोई तरीका नहीं है कि अभिव्यक्ति का परिणाम कब बदल सकता है, इसलिए यह हर बार इसे कॉल करता है।

एक बेहतर विकल्प प्रत्येक चैनल में ध्वज सेट करना होगा और प्रासंगिक ध्वज का परीक्षण करने के लिए ng-if का उपयोग करना होगा। तब आपको केवल $scope.activeCategory परिवर्तनों को झंडा अपडेट करना होगा, जिन्हें आप या तो कोड के साथ कर सकते हैं, जहां आप श्रेणी सेट करते हैं या $scope.$watch() का उपयोग स्वचालित रूप से ट्रिगर करने के लिए करते हैं।

उदा।

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

अधिक कुशल होना चाहिए।