बूटस्ट्रैप का उपयोग कर Angular.js और गतिशील बनाने पंक्तियों

Question

मैं कैसे गतिशील ng-repeat निर्देशों का उपयोग angular.js साथ row-fluid के एक वर्ग के साथ bootstrap पंक्ति divs बनाने के लिए यह पता लगाने की कोशिश कर रहा हूँ।

यहाँ कोणीय है:

<div ng-repeat="task in tasks" class="row-fluid"> 
    <div class="span6 well">{{task.name}}</div> 
</div> 

यह हालांकि नहीं काम करता है। bootstrap एचटीएमएल मैं उत्पन्न करने के लिए इच्छा है:

http://jsfiddle.net/YKkXA/2/

मूल रूप से मैं एनजी-दोहराने के अंदर सूचकांक के आधुनिक 2 क्या करने की जरूरत है, और अगर इसकी 0, एक नया <div class="row-fluid"></div> बाहर बंद करने और पैदा करते हैं। यह कैसे संभव है?

Answer 1

विचार उन्हें अपने समूह को फ़िल्टर करने के लिए फ़िल्टर करना है, और उप-आइटमों पर फिर से चलाने के लिए दूसरा ngRepeat बनाना है। अपने controler में

module.filter('groupBy', function() { 
    return function(items, groupedBy) { 
     if (items) { 
      var finalItems = [], 
       thisGroup; 
      for (var i = 0; i < items.length; i++) { 
       if (!thisGroup) { 
        thisGroup = []; 
       } 
       thisGroup.push(items[i]); 
       if (((i+1) % groupedBy) === 0) { 
        finalItems.push(thisGroup); 
        thisGroup = null; 
       } 
      } 
      if (thisGroup) { 
       finalItems.push(thisGroup); 
      } 
      return finalItems; 
     } 
    }; 
}); 

(क्योंकि अगर आप अपने टेम्पलेट में सीधे फ़िल्टर करते हैं, तो आप एक $digest loop होगा):

पहले, अपने मॉड्यूल के लिए कि फ़िल्टर जोड़ें

function TaskCtrl() { 
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2); 
} 

और में अपने .html:

<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid"> 
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div> 
</div> 

Answer 2

विषय बंद: बूटस्ट्रैप का उपयोग कर आप केवल वर्ग = "span6 well" के divs को एक bigass पंक्ति में रख सकते हैं क्योंकि वे अच्छी तरह से ढेर होंगे। (आपको भी एक उत्तरदायी लेआउट मिलेगा)। क्षमा करें अगर यह व्यवहार का एक उदाहरण था जो बूटस्ट्रैप संभाल नहीं सकता है। एंथनी और रेमिजिओ सही हैं; आपको एक अतिरिक्त मॉड्यूल वाहन बनाना होगा जो आपके एनजी-बार-बार टैग में विसर्जित divs उत्पन्न करेगा।

Answer 3

एंथनी ने जवाब में सुधार के रूप में, मैं कहूंगा कि आप उन सभी शर्तों के माध्यम से स्लाइस विधि का उपयोग करके खुद को बहुत परेशानी बचा सकते हैं।

module.filter('group', function() { 
    return function(items, groupItems) { 
     if (items) { 
      var newArray = []; 

      for (var i = 0; i < items.length; i+=groupItems) { 
       if (i + groupItems > items.length) { 
        newArray.push(items.slice(i)); 
       } else { 
        newArray.push(items.slice(i, i + groupItems)); 
       } 
      } 

      return newArray; 
     } 
    }; 
}); 

उसके बाद आप के रूप में एंथनी अपने जवाब में कहा अपने नियंत्रक पर फिल्टर कॉल कर सकते हैं:

के रूप में यह इस प्रकार अपने फिल्टर को परिभाषित करने का प्रयास करें

function Controller ($scope) { 
    $scope.itemsGrouped = $filter('group')(itemsArray, 5); 
}