कोणीय एनजी-रिपीट बूटस्ट्रैप पंक्ति को हर 3 या 4 कॉल में जोड़ें

Question

मैं प्रत्येक 3 कॉलम में बूटस्ट्रैप पंक्ति वर्ग को इंजेक्ट करने के लिए सही पैटर्न की तलाश कर रहा हूं। मुझे इसकी आवश्यकता है क्योंकि कोल में एक निश्चित ऊँचाई नहीं है (और मैं एक को ठीक नहीं करना चाहता), इसलिए यह मेरे डिजाइन को तोड़ता है!

यहाँ मेरा कोड है:

<div ng-repeat="product in products">
    <div ng-if="$index % 3 == 0" class="row">
        <div class="col-sm-4" >
            ...
        </div>
    </div>
</div>

लेकिन यह प्रत्येक पंक्ति में केवल एक उत्पाद प्रदर्शित करता है। अंतिम परिणाम के रूप में मुझे क्या चाहिए:

<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>
<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>

क्या मैं इसे केवल एनजी-रिपीट पैटर्न (निर्देश या नियंत्रक के बिना) के साथ प्राप्त कर सकता हूं? डॉक्स एनजी-दोहराने से शुरू परिचय और एनजी-दोहराने अंत लेकिन मैं समझ नहीं यह इस प्रयोग के मामले में है का उपयोग करने के लिए कैसे! मुझे ऐसा लगता है कि कुछ ऐसा है जिसका उपयोग हम अक्सर बूटस्ट्रैप टेंपलेटिंग में करते हैं! ? धन्यवाद

Comments

मुझे लगता है कि आपको अपने डेटा को इस तरह से मॉडल करना चाहिए जो आपके डिज़ाइन को फिट करता है, यह शायद बहुआयामी सरणी या ऑब्जेक्ट होना चाहिए, जिसमें पंक्तियों और स्तंभों का प्रतिनिधित्व होता है, फिर आपको पंक्तियों पर चलना चाहिए और सशर्त वर्ग "एनजी-क्लास" निर्देश और पंक्ति के अंदर का उपयोग करना चाहिए फिर आपको स्तंभों पर पुनरावृति करनी चाहिए।

— antanas_sepikas 10

दिलचस्प और निश्चित रूप से एक कार्यशील समाधान लेकिन जिस दिन मैं 3 के बजाय 4 उत्पादों की एक पंक्ति प्रदर्शित करना चाहता हूं, मेरे पास, मेरे डेटा संरचना को संशोधित करने के लिए, मैं इसे शुद्ध प्रदर्शन कार्यक्षमता के "दायरे" में रहना पसंद करूंगा ...

— hugsbrugs

मैं देख रहा हूँ, तो आप probobly पुनरावृति मात्रा में एरियल जवाब में के रूप में, यह भी आप इस पोस्ट मिल सकता है चाहिए stackoverflow.com/questions/18564888/... उपयोगी।

— antanas_sepikas

मुझे लगता है कि यह वही है जो आप ढूंढ रहे हैं: stackoverflow.com/a/30426750/1943442

— user1943442

संबंधित stackoverflow.com/a/25838091/759452

— Adrien Be

Answer 1

शीर्ष वोटिंग का जवाब, जबकि प्रभावी, वह नहीं है जिसे मैं कोणीय तरीका मानता हूं, और न ही यह बूटस्ट्रैप की अपनी कक्षाओं का उपयोग कर रहा है जो इस स्थिति से निपटने के लिए हैं। जैसा कि @claies ने उल्लेख किया है, .clearfixवर्ग इन जैसी स्थितियों के लिए है। मेरी राय में, सबसे साफ कार्यान्वयन इस प्रकार है:

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

यह संरचना उत्पादों सरणी के गन्दा अनुक्रमण से बचाती है, स्वच्छ डॉट संकेतन के लिए अनुमति देती है, और अपने इच्छित उद्देश्य के लिए स्पष्ट वर्ग का उपयोग करती है।

Comments

यह एक अच्छा विचार है, हालांकि यदि आप फ्लेक्सबॉक्स का उपयोग करने में रुचि रखते हैं तो आपको इसका उपयोग पंक्ति में करना होगा न कि पंक्तियों के अंदर दिए गए विभाजनों में प्रत्येक बॉक्स / div को समान ऊंचाई की अनुमति देने के लिए। क्लीयरफिक्स महान है लेकिन सब कुछ लाइन में रखने के साथ मदद नहीं करता है।

— कोडेड कंटेनर

यह मेरा पसंदीदा जवाब है। बहुत साफ और आसान।

— हेनरिक

मेरे कार्यान्वयन के लिए भी बढ़िया काम करता है! :)

— विल स्ट्रॉहल

महान ... यह एक स्वीकृत जवाब के रूप में मतदान किया जाना चाहिए!

— वेलु

इसका सही जवाब

— दीपू

Answer 2

मुझे पता है कि थोड़ी देर हो चुकी है लेकिन यह अभी भी किसी की मदद कर सकता है। मैंने इसे इस तरह किया:

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>

jsfiddle

Comments

इसने वास्तव में मेरी बहुत मदद की !! धन्यवाद।

— सुम्पीअल्लाह

यह वास्तव में लागू करने के लिए आसान है! धन्यवाद!

— मानस बजाज

मेरी बहुत मदद की। धन्यवाद!

— अहमद अजमी

महान समाधान, हालांकि यह जांच नहीं करता है कि $ इंडेक्स + 1 और $ इंडेक्स +2 सरणी सीमाओं से पिछले हैं या नहीं। अंतिम दो डिवीजनों की आवश्यकता होती है ng-if="$index+1 < products.length"औरng-if="$index+2 < products.length"

— मुस्तफा ओज़टर्क

क्या हम कुंजी, वैल्यू पेयर के लिए ऐसा कर सकते हैं। अगली चाबी मिल रही है? इसके बजाय $ इंडेक्स + 1

— bpbhat77

Answer 3

ठीक है, यह समाधान पहले से ही यहाँ की तुलना में कहीं अधिक सरल है, और विभिन्न डिवाइस चौड़ाई के लिए अलग-अलग कॉलम चौड़ाई की अनुमति देता है।

<div class="row">
    <div ng-repeat="image in images">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            ... your content here ...
        </div>
        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
    </div>
</div>

ध्यान दें कि % 6भाग को परिणामस्वरूप स्तंभों की संख्या के बराबर माना जाता है। इसलिए यदि स्तंभ तत्व पर आपके पास कक्षा है col-lg-2तो 6 कॉलम होंगे, इसलिए उपयोग करें ... % 6।

यह तकनीक (छोड़कर ng-if) वास्तव में यहां प्रलेखित है: बूटस्ट्रैप डॉक्स

Comments

मेरी राय में, यह सबसे अच्छा समाधान है।

— user216661

यदि बूटस्ट्रैप के लिए नया है, तो इस तथ्य को अनदेखा करना आसान है कि पंक्तियों को परिभाषित करना आवश्यक नहीं है। यह पूरी तरह से काम करता है और डंकन के समाधान का थोड़ा और पूर्ण संस्करण है।

— phosplait

यही वह है जिसकी तलाश में मैं हूं।

— हेनरिच

@phosplait डंकन का इस पर क्या फायदा है?

— जेप्पे

Answer 4

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

आप सही हैं, बूटस्ट्रैप टेबल अजीब तरह से काम करते हैं जब आपके पास कॉलम होते हैं जो निश्चित ऊंचाई नहीं होते हैं। हालाँकि, इस समस्या से निपटने और उत्तरदायी रीसेट करने के लिए एक बूटस्ट्रैप क्लास बनाया गया है ।

बस <div class="clearfix"></div>प्रत्येक नई पंक्ति के शुरू होने से पहले एक खाली बनाएं और फ़्लोट्स को रीसेट करने की अनुमति दें और कॉलम अपने सही पदों पर वापस आ जाएं।

यहाँ एक बूटप्ले है ।

Comments

यह उस नकारात्मक 15px मार्जिन को हल नहीं करता है जो प्रत्येक .row बूटस्ट्रैप के लिए है।

— लोगस

क्या यह flexकॉलम को समान ऊँचाई बनाने के लिए काम करता है ?

— Alisson

Answer 5

आपके सुझावों के लिए धन्यवाद, आपने मुझे सही रास्ते पर ले लिया!

आइए पूर्ण विवरण के लिए जाएं:

• डिफ़ॉल्ट रूप से AngularJS http प्राप्त क्वेरी एक वस्तु देता है

• इसलिए यदि आप @ एरियल Array.prototype.chunk फ़ंक्शन का उपयोग करना चाहते हैं, तो आपके पास ऑब्जेक्ट को एक सरणी में बदलने के लिए सबसे पहले है।

• और फिर अपने नियंत्रण में चंक फ़ंक्शन का उपयोग करने के लिए अन्यथा यदि सीधे एनजी-रिपीट में उपयोग किया जाता है, तो यह आपको एक त्रुटि त्रुटि में लाएगा । अंतिम नियंत्रक दिखता है:

  // Initialize products to empty list
  $scope.products = [];
  
  // Load products from config file
  $resource("/json/shoppinglist.json").get(function (data_object)
  {
      // Transform object into array
      var data_array =[];
      for( var i in data_object ) {
          if (typeof data_object[i] === 'object' && data_object[i].hasOwnProperty("name")){
              data_array.push(data_object[i]);
          }
      }
      // Chunk Array and apply scope
      $scope.products = data_array.chunk(3);
  });

और HTML बन जाता है:

<div class="row" ng-repeat="productrow in products">

    <div class="col-sm-4" ng-repeat="product in productrow">

दूसरी तरफ, मैंने अपनी JSON फ़ाइल से ऑब्जेक्ट {} के बजाय सीधे एक सरणी [] वापस करने का फैसला किया। इस तरह, नियंत्रक बन जाता है (कृपया विशिष्ट सिंटैक्स ध्यान दें : सही है ):

    // Initialize products to empty list 
    $scope.products = [];

    // Load products from config file
    $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
    {
        $scope.products = data_array.chunk(3);
    });

HTML ऊपर के समान ही रहती है।

OPTIMIZATION

सस्पेंस में आखिरी सवाल यह है कि चंक फंक्शन के साथ जावास्क्रिप्ट ऐरे को बिना बढ़ाए इसे 100% एंगुलरज कैसे बनाया जाए ... अगर कुछ लोग हमें दिखाने में दिलचस्पी रखते हैं अगर एनजी-रिपीट-स्टार्ट और एनजी-रिपीट-एंड जाने का तरीका है .. । मैं उत्सुक हूँ ;)

एंड्रयू का समाधान

@Andrew की बदौलत, अब हम जानते हैं कि हर तीन (या जो भी संख्या) तत्व बूटस्ट्रैप क्लियरफिक्स क्लास को जोड़ते हैं, वे डिफरेंशेंट्स ब्लॉक की हाइट से डिस्प्ले प्रॉब्लम को ठीक करते हैं।

तो HTML बन जाता है:

<div class="row">

    <div ng-repeat="product in products">

        <div ng-if="$index % 3 == 0" class="clearfix"></div>

        <div class="col-sm-4"> My product descrition with {{product.property}}

और आपका नियंत्रक हटाए गए चंक फ़ंक्शन के साथ काफी नरम रहता है :

// Initialize products to empty list 
        $scope.products = [];

        // Load products from config file
        $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
        {
            //$scope.products = data_array.chunk(3);
            $scope.products = data_array;
        });

Answer 6

आप इसे एक निर्देश के बिना कर सकते हैं लेकिन मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है। ऐसा करने के लिए आपको तालिका में प्रदर्शित किए जाने वाले डेटा से सरणी का निर्माण करना होगा, और उसके बाद सरणी के माध्यम से पुनरावृति करने के लिए 2 एनजी-रिपीट का उपयोग करें।

प्रदर्शन के लिए सरणी बनाने के लिए इस फ़ंक्शन का उपयोग करें जैसे कि products.chunk (3)

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

और फिर कुछ ऐसा करें कि 2 एनजी-रिपीट का उपयोग करें

<div class="row" ng-repeat="row in products.chunk(3)">
  <div class="col-sm4" ng-repeat="item in row">
    {{item}}
  </div>
</div>

Answer 7

अल्पारी समाधान के आधार पर, केवल एनडिटेड एनजी-रिपीट वाले टेम्पलेट्स का उपयोग करना। दोनों पूर्ण और आंशिक रूप से खाली पंक्तियों के साथ काम करता है:

<div data-ng-app="" data-ng-init="products='soda','beer','water','milk','wine']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4" 
            ng-repeat="product in products.slice($index, ($index+3 > products.length ? 
            products.length : $index+3))"> {{product}}</div>
    </div>
</div>

JSFiddle

Answer 8

मैंने इसका केवल समाधान किया है, केवल टेम्पलेट में काम कर रहा है। उपाय है

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/2+1">    <!-- 2 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-6" ng-if="$index>=2*$parent.$index && $index <= 2*($parent.$index+1)-1"> <!-- 2 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

बिंदु दो बार डेटा का उपयोग कर रहा है, एक बाहरी लूप के लिए है। अतिरिक्त अवधि के टैग बने रहेंगे, लेकिन यह इस बात पर निर्भर करता है कि आप कैसे व्यापार करते हैं।

यदि यह एक 3 कॉलम लेआउट है, तो यह जैसा होगा

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/3+1">    <!-- 3 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-4" ng-if="$index>=3*$parent.$index && $index <= 3*($parent.$index+1)-1"> <!-- 3 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

ईमानदारी से मैं चाहता था

$index<Math.ceil(products.length/3)

हालांकि यह काम नहीं किया।

Comments

मैंने प्रत्येक पंक्ति में 2 तत्वों को लागू करने के लिए इस समाधान की कोशिश की। उदाहरण के लिए, मेरे पास एक सूची में 5 तत्व हैं, इसलिए मेरे पास आउटपुट 3 पंक्तियों में 2 तत्वों / स्तंभों के साथ पहले 2 पंक्तियों और अंतिम पंक्ति में 1 कॉलम है। समस्या यह है, मैं यहाँ 5 पंक्तियाँ प्राप्त कर रहा हूँ जिसमें अंतिम 2 पंक्तियाँ खाली हैं। आश्चर्य है कि इसे कैसे ठीक किया जाए? धन्यवाद

— मेवरिक रिज़

@MaverickAzy कोशिश करने के लिए धन्यवाद। मुझे पता है कि एक मुद्दा है कि अगर उन तत्वों की ऊंचाई अलग है तो यह अच्छी तरह से काम नहीं करता है।

— वाटारू

तत्वों की ऊंचाई वास्तव में समान हैं। समस्या यह है, मुझे केवल 3 पंक्तियाँ मिलनी चाहिए लेकिन अंतिम 2 खाली पंक्तियों के साथ 5 पंक्तियाँ मिल रही हैं। क्या आप मुझे बता सकते हैं कि products.length 5 है, तो 5/2 + 1 =? कक्षा पंक्ति के लिए पंक्ति 2 पर यह तर्क मेरे लिए स्पष्ट नहीं है।

— मैवरिक रिज़

@MaverickAzy उन खाली पंक्तियों को उत्पन्न करना चाहिए जैसे वे हैं। क्या यह आपके लेआउट को गड़बड़ करता है?

— वाटारू

नहीं, यह लेआउट को गड़बड़ नहीं करता है। केवल चिंता खाली पंक्तियों को लेकर है। वास्तव में अगर आप मेरी मदद कर सकते हैं तो इसकी सराहना करें। धन्यवाद

— मेवरिक रिज़

Answer 9

@ डंकन के बारे में बस एक और थोड़ा सा सुधार और दूसरा स्पष्ट तत्व के आधार पर जवाब। यदि आप सामग्री को क्लिक करने योग्य बनाना चाहते हैं, तो आपको उस z-indexपर> 0 की आवश्यकता होगी या क्लीयरफिक्स सामग्री को ओवरलैप करेगा और क्लिक को हैंडल करेगा।

यह काम नहीं करने वाला उदाहरण है (आप कर्सर सूचक को नहीं देख सकते हैं और क्लिक करने से कुछ नहीं होगा):

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4" style="cursor: pointer" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

जबकि यह निश्चित है :

<div class="row">
    <div ng-repeat-start="product in products" class="clearfix" ng-if="$index % 3 == 0"></div>
    <div ng-repeat-end class="col-sm-4" style="cursor: pointer; z-index: 1" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
    </div>
</div>

मैंने z-index: 1सामग्री को क्लीयरफिक्स पर बढ़ाने के लिए जोड़ा है और मैंने इसके बजाय कंटेनर div का उपयोग करके हटा दिया है ng-repeat-startऔर ng-repeat-end(AngularJS 1.2 से उपलब्ध) क्योंकि यह z- इंडेक्स काम नहीं कर रहा है।

उम्मीद है की यह मदद करेगा!

अपडेट करें

प्लंकर: http://plnkr.co/edit/4w5wZj

Comments

क्या यह flexपंक्तियों में स्तंभों को समान ऊंचाई देने के लिए काम करता है ?

— एलिसन

मुझे यकीन नहीं है कि मैं आपके सवाल को समझ सकता हूँ। यह एक तेज़ प्लंकर है जो आपको दिखाता है कि यह कोड क्या करता है: plnkr.co/edit/4w5wZj?p=preview । शब्दों में, स्पष्ट रूप से सही ढंग से शीर्षकों की दूसरी पंक्ति को संरेखित करें: वे सभी एक ही बिंदु से शुरू होते हैं लेकिन उनके पास अभी भी एक ही ऊंचाई नहीं है (जैसा कि आप पृष्ठभूमि के रंग के लिए धन्यवाद देख सकते हैं)। डिफ़ॉल्ट व्यवहार क्या है यह देखने के लिए क्लियरफिक्स क्लास को हटाने का प्रयास करें। मैंने फ्लेक्सबॉक्स का उपयोग केवल एक या दो बार किया है, लेकिन इसमें बहुत सी सीएसएस गुण हैं और मुझे यकीन है कि आप जो खोज रहे हैं वह आपको मिल सकता है।

— मैक्जियोजन

बूटस्ट्रैप सबसे ऊंचे स्तंभ की समान ऊंचाई पाने के लिए सभी स्तंभों को एक ही पंक्ति में बनाने का एक उदाहरण प्रदान करता है । मुझे इसका उपयोग करना था। समस्या यह है कि 12 से अधिक कॉलम होने पर एक नई लाइन पर लपेटने की क्षमता खो देता है, इसलिए आपको मैन्युअल रूप से नई पंक्तियों को बनाने की आवश्यकता है। थोड़ा और शोध करने के बाद, मैं एक समाधान प्राप्त कर सकता हूं और उत्तर के रूप में यहां पोस्ट कर सकता हूं, हालांकि मुझे नहीं पता कि क्या यह सबसे अच्छा है। वैसे भी धन्यवाद, आपके जवाब ने मेरी मदद की!

— एलिसन

यह पहली बार है जब मैं उस उदाहरण को देखता हूं, यह वास्तव में उपयोगी है! आपकी मदद करके प्रसन्नता हुई।

— मैक्जियोजन

Answer 10

मैं एनजी वर्ग का उपयोग कर इसे हल किया

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

Answer 11

क्लास लगाने का सबसे अच्छा तरीका है ng-class.It का उपयोग करना। कुछ कंडीशन के आधार पर क्लास लगाने के लिए इसका इस्तेमाल किया जा सकता है।

<div ng-repeat="product in products">
   <div ng-class="getRowClass($index)">
       <div class="col-sm-4" >
           <!-- your code -->
       </div>
   </div>

और फिर अपने कंट्रोलर में

$scope.getRowClass = function(index){
    if(index%3 == 0){
     return "row";
    }
}

Answer 12

यहां कई उत्तरों और सुझावों को संयोजित करने के बाद, यह मेरा अंतिम उत्तर है, जो इसके साथ अच्छी तरह से काम करता है flex, जो हमें समान ऊंचाई वाले कॉलम बनाने की अनुमति देता है, यह अंतिम इंडेक्स की भी जांच करता है, और आपको आंतरिक HTML को दोहराने की आवश्यकता नहीं है। यह उपयोग नहीं करता है clearfix:

<div ng-repeat="prod in productsFiltered=(products | filter:myInputFilter)" ng-if="$index % 3 == 0" class="row row-eq-height">
    <div ng-repeat="i in [0, 1, 2]" ng-init="product = productsFiltered[$parent.$parent.$index + i]"  ng-if="$parent.$index + i < productsFiltered.length" class="col-xs-4">
        <div class="col-xs-12">{{ product.name }}</div>
    </div>
</div>

यह इस तरह से कुछ उत्पादन करेगा:

<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>

Answer 13

@Alpar के समाधान में थोड़ा सा संशोधन

<div data-ng-app="" data-ng-init="products=['A','B','C','D','E','F', 'G','H','I','J','K','L']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 6 == 0" class="row">
        <div class="col-xs-2" ng-repeat="idx in [0,1,2,3,4,5]">
        {{products[idx+$parent.$index]}} <!-- When this HTML is Big it's useful approach -->
        </div>
    </div>
</div>

jsfiddle

Answer 14

यह मेरे लिए काम कर रहा है, कोई स्प्लिसिंग या कुछ भी आवश्यक नहीं है:

एचटीएमएल

<div class="row" ng-repeat="row in rows() track by $index">
    <div class="col-md-3" ng-repeat="item in items" ng-if="indexInRange($index,$parent.$index)"></div>
</div>

जावास्क्रिप्ट

var columnsPerRow = 4;
$scope.rows = function() {
  return new Array(columnsPerRow);
};
$scope.indexInRange = function(columnIndex,rowIndex) {
  return columnIndex >= (rowIndex * columnsPerRow) && columnIndex < (rowIndex * columnsPerRow) + columnsPerRow;
};

Answer 15

बॉर्न सॉल्यूशंस इसकी सबसे अच्छी बात है, बस ज़रूरतों को पूरा करने के लिए थोड़ा सा ट्वीस्ट चाहिए, मेरे पास अलग-अलग रिस्पॉन्सिबल सॉल्यूशंस थे और थोड़ा बदल गया

<div ng-repeat="post in posts">
    <div class="vechicle-single col-lg-4 col-md-6 col-sm-12 col-xs-12">
    </div>
    <div class="clearfix visible-lg" ng-if="($index + 1) % 3 == 0"></div>
    <div class="clearfix visible-md" ng-if="($index + 1) % 2 == 0"></div>
    <div class="clearfix visible-sm" ng-if="($index + 1) % 1 == 0"></div>
    <div class="clearfix visible-xs" ng-if="($index + 1) % 1 == 0"></div>
</div>

Answer 16

अल्पारी के उत्तर पर निर्माण, यहाँ कई कंटेनरों (पंक्तियों, स्तंभों, बाल्टियों, जो भी हो) में वस्तुओं की एक सूची को विभाजित करने का एक अधिक सामान्य तरीका है:

<div class="row" ng-repeat="row in [0,1,2]">
  <div class="col" ng-repeat="item in $ctrl.items" ng-if="$index % 3 == row">
    <span>{{item.name}}</span>
  </div>
</div> 

10 वस्तुओं की सूची के लिए, उत्पन्न करता है:

<div class="row">
  <div class="col"><span>Item 1</span></div>
  <div class="col"><span>Item 4</span></div>
  <div class="col"><span>Item 7</span></div>
  <div class="col"><span>Item 10</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 2</span></div>
  <div class="col"><span>Item 5</span></div>
  <div class="col"><span>Item 8</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 3</span></div>
  <div class="col"><span>Item 6</span></div>
  <div class="col"><span>Item 9</span></div>
</div> 

कंटेनरों की संख्या को जल्दी से एक नियंत्रक फ़ंक्शन में कोडित किया जा सकता है:

जेएस (ES6)

$scope.rowList = function(rows) {
  return Array(rows).fill().map((x,i)=>i);
}
$scope.rows = 2;

एचटीएमएल

<div class="row" ng-repeat="row in rowList(rows)">
  <div ng-repeat="item in $ctrl.items" ng-if="$index % rows == row">
    ...

यह दृष्टिकोण आइटम <span>{{item.name}}</span>टेम्पलेट ( इस मामले में) को स्रोत टेम्पलेट में डुप्लिकेट करने से बचता है - एक साधारण स्पैन के लिए बहुत बड़ी जीत नहीं है, लेकिन अधिक जटिल DOM संरचना (जो मेरे पास थी) के लिए यह टेम्पलेट DRY को बनाए रखने में मदद करता है।

Answer 17

अपडेट 2019 - बूटस्ट्रैप 4

चूंकि बूटस्ट्रैप 3 में फ्लोट्स का उपयोग किया गया था, इसलिए स्तंभों के असमान आवरण को रोकने के लिए इसे प्रत्येक n (3 या 4) कॉलम ( ) में क्लीयरफिक्स रीसेट की आवश्यकता थी ।.col-*.row

अब जबकि बूटस्ट्रैप 4 फ्लेक्सबॉक्स का उपयोग करता है , अब अलग-अलग .rowटैग में कॉलम लपेटने की जरूरत नहीं है , या हर एन कॉलम को लपेटने के लिए कोल्स को मजबूर करने के लिए अतिरिक्त डीविज़ लगाने की आवश्यकता है ।

आप केवल एक ही कंटेनर में सभी कॉलम दोहरा सकते हैं .row।

उदाहरण के लिए प्रत्येक दृश्य पंक्ति में 3 कॉलम हैं:

<div class="row">
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     (...repeat for number of items)
</div>

बूटस्ट्रैप के लिए एनजी-रिपीट बस है:

  <div class="row">
      <div class="col-4" ng-repeat="item in items">
          ... {{ item }}
      </div>
  </div>

डेमो: https://www.codeply.com/go/Z3IjLRsJXX

Answer 18

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

<section>
<div class="container">
        <div ng-app="myApp">
        
                <div ng-controller="SubregionController">
                    <div class="row text-center">
                        <div class="col-md-4" ng-repeat="post in posts">
                            <div >
                                <div>{{post.title}}</div>
                            </div>
                        </div>
                    
                    </div>
                </div>        
        </div>
    </div>
</div> 

</section>