2013-10-30 7 views
9

को छोड़कर मैं एंगुलर के साथ मेट्रो टाइल प्रकार ग्रिड बनाने की कोशिश कर रहा हूं, यह प्राप्त करने के लिए मैं चाहता हूं कि प्रत्येक टाइल एक अलग रंग हो। तो मेरी कार्यवाही की योजना एक ऐसा फ़ंक्शन बनाना था जो लूप के अंदर यादृच्छिक रूप से रंग चुनें (ng-repeat का उपयोग करके)। यहाँ के रूप में आप मैं एक समारोह RandomColourClass कहा जाता है के साथ वर्ग के नाम की स्थापना कर रहा हूँ देख सकते हैं, यहाँ जे एस बिट्स

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}]; 

$scope.RandomColourClass = function(){ 
    var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)]; 
    return randomColour.colour.toString(); 
}; 

यह सब काम करता है है मैं अब तक किया है ....

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText"> 
    <div > 
    <h6>{{stockRecord.ProductGroupName}}</h6> 
    </div> 
</div> 

तो ठीक है और टाइल्स अलग रंग के होते हैं, लेकिन मैं निम्न त्रुटि

Error: 10 $digest() iterations reached. Aborting!".

मैं मिला है समस्या के अन्य पदों पर एक नज़र मिलती रहती है, लेकिन मैं समझ नहीं क्या मैं इसे काम कर पाने के बदलने की जरूरत है !? किसी भी मदद या दिशा की सराहना की जाएगी :)

+0

पोस्ट 'ग्रिडस्टॉक रिकॉर्ड्स' कृपया –

उत्तर

25

कोणीय डाइजेस्ट कार्य करता है जब आपका डेटा बदलता है तो डोम अपडेट करने के लिए।

पाचन के दौरान, यह डीओएम में आपके द्वारा लगाए गए सभी मूल्यों को दोबारा लागू करता है, इस मामले में {{RandomColorClass()}}। यदि उनमें से कोई भी बदलता है, तो यह फिर से एक पाचन चक्र करता है (क्योंकि कुछ चर बदलते चर के मान पर निर्भर हो सकते हैं, उदाहरण के लिए)।

यह लगातार बार-बार करता है जब तक पंक्ति में दो digests एक ही मूल्य में परिणाम नहीं - यानी, कुछ भी नहीं बदला है।

क्या हो रहा है कि जब एक पाचन होता है, तो आपके RandomColorClass() फ़ंक्शन को कॉल किया जा रहा है और एक अलग मूल्य देता है। यह एक अतिरिक्त पाचन ट्रिगर करता है, जहां RandomColorClass() फिर से एक अलग मूल्य देता है, जो एक और पाचन ट्रिगर करता है ...

क्या आप देख सकते हैं कि यह कहां जा रहा है? आपको इस तरीके से यादृच्छिक मूल्य नहीं पैदा करना चाहिए - इसके बजाय, उन्हें अपने दायरे में उत्पन्न करें और उन्हें जारी रखें।

function randomColourClass() { /* ... */ }; 

$scope.GridStockRecords.forEach(function(record) { 
    record.colorClass = randomColourClass(); 
}); 

और एचटीएमएल:

एक दृष्टिकोण अपने दायरे में हो सकता है,

<div ng-repeat="stockRecord in GridStockRecords | filter:searchText" 
     ng-class="stockRecord.colorClass"> 
     <div> 
     <h6>{{stockRecord.ProductGroupName}}</h6> 
     </div> 
    </div> 
+0

कुल समझ में आता है! सहायता के लिए धन्यवाद! – user2859298

+0

बिल्कुल मेरे साथ क्या हुआ। आपका बहुत बहुत धन्यवाद! – zeroliu

1

उत्तर इस विशेष प्रश्न से संबंधित नहीं है, लेकिन मैं इसे यहाँ जोड़ रहा है क्योंकि वह Google मोर्चे पर है पृष्ठ जब आप त्रुटि संदेश की खोज करते हैं और मुझे यह समझने तक थोड़ा सा समय लगता है:

मेरे पास इस दृश्य में कुछ ऐसा था:

<custom-tag data="[1,2,3]"/> 

और कस्टम टैग के नियंत्रक को $scope.data पर एक वॉचर स्थापित किया गया था। इसने एंगुलरजेएस को बारफ करने का कारण बना दिया क्योंकि हर बार जब उसने data के मूल्य को दोबारा जांच लिया तो इसे दृश्य से एक नई वस्तु मिली (याद रखें, सरणी एक वस्तु है) इसलिए यह इसे ठीक से पचाने में कभी खत्म नहीं हुआ।

5

आईई 10 में मुझे एक ही समस्या थी, यह समस्या थी कि समस्या यह थी कि मैं window.location का उपयोग कर रीडायरेक्ट कर रहा था।

window.location = "#route/yada"; 

$location.path("/route/yada); 

करने के लिए कोड बदल गया है और यह है कि मेरे मुद्दों को हल किया। = डी

+0

पुनर्निर्देशन के इन तरीकों के साथ अजीब बात: $ window.location.href '$ digest() पुनरावृत्तियों तक पहुंच सकता है। त्रुटि को निरस्त करना, $ location.path() कभी-कभी काम नहीं करता है। मैंने $ location.url ("मार्ग/यादा") के साथ हल किया; –

0

मुझे इस त्रुटि का सामना करना पड़ा जब मैंने ng-class = "submit()" के बजाय ng-class = "submit()" को गलत टाइप किया। मैं किसी और को इतनी मूर्खतापूर्ण त्रुटि बनाने की कल्पना नहीं कर सकता, लेकिन रिकॉर्ड के लिए, यह 10 डॉलर डाइजेस्ट() पुनरावृत्तियों को निरस्त करने के लिए एक और तरीका है!

संबंधित मुद्दे