কৌণিক এনজি-রিপিট প্রতি 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>

আমি কি কেবল এনজি-রিপিট প্যাটার্ন (নির্দেশনা বা নিয়ামক ব্যতীত) দিয়ে এটি অর্জন করতে পারি? ডক্স NG-পুনরাবৃত্তি শুরুর পরিচয় করিয়ে দিতে এবং NG-পুনরাবৃত্তি-এন্ড কিন্তু আমি চিন্তা করতে পারে না এটা এই ব্যবহারের ক্ষেত্রে ব্যবহার করবেন যেভাবে! আমার মনে হচ্ছে এটি এমন কিছু যা আমরা প্রায়শই বুটস্ট্র্যাপ টেম্প্লেটিংয়ে ব্যবহার করি! ? ধন্যবাদ

Comments

আমার মনে হয় আপনার ডাটাটি এমনভাবে ডিজাইন করা উচিত যা আপনার ডিজাইনের সাথে খাপ খায়, এটি সারি এবং কলামগুলির উপস্থাপনা সহ সম্ভবত বহুমাত্রিক অ্যারে বা অবজেক্ট হওয়া উচিত, তারপরে আপনার সারিগুলিতে পুনরাবৃত্তি হওয়া উচিত এবং শর্তসাপেক্ষ শ্রেণীর "এনজি-ক্লাস" নির্দেশিকা এবং ভিতরে সারি ব্যবহার করা উচিত এরপরে আপনার কলামগুলিতে পুনরাবৃত্তি হওয়া উচিত।

— আন্তনাস_সপিকাস

আকর্ষণীয় এবং অবশ্যই একটি কার্যক্ষম সমাধান তবে যেদিন আমি 3 এর পরিবর্তে 4 টি পণ্য এক সারি প্রদর্শন করতে চাই, আমার কাছে আমার ডেটা স্ট্রাকচারটি পরিবর্তন করতে হবে, আমি খাঁটি প্রদর্শন কার্যকারিতার "সুযোগ" এ থাকতে পছন্দ করব ...

— হাগসবার্গস

আমি দেখতে, তাহলে আপনি probobly বারবার অংশ এরিয়েল উত্তর হিসাবে, এছাড়াও আপনি এই পোস্টে খুঁজে পেতে পারেন উচিত stackoverflow.com/questions/18564888/... দরকারী।

— অ্যান্টানাস_সপিকাস

আমি মনে করি এটা ঠিক কি আপনি যা খুঁজছেন: stackoverflow.com/a/30426750/1943442

— user1943442

সম্পর্কিত স্ট্যাকওভারফ্লো.com

— অ্যাড্রিয়েন

Answer 1

শীর্ষস্থানীয় ভোট দেওয়া উত্তর, কার্যকর হলেও, আমি এটিকে কৌণিক উপায়ে বিবেচনা করব না, বা এটি বুটস্ট্র্যাপের নিজস্ব ক্লাস ব্যবহার করছে না যা এই পরিস্থিতি মোকাবেলা করার জন্য বোঝানো হচ্ছে। @ ক্লাই যেমন উল্লিখিত হয়েছে, শ্রেণিটি .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

এটি একটি ভাল ধারণা, তবে আপনি যদি প্রতিটি বক্স / ডিভিও একই উচ্চতা হতে দেয় তবে ফ্লেক্সবক্সটি ব্যবহার করতে আপনাকে সারিটিতে এবং সারিগুলির ডিভগুলিতে ব্যবহার করতে হবে না। ক্লিয়ারফিক্স দুর্দান্ত তবে সবকিছু রেখাযুক্ত রাখতে সহায়তা করে না।

— কোডেড কনটেইনার

এটি আমার পছন্দসই উত্তর। খুব পরিষ্কার এবং সহজ।

— হিনরিক

আমার বাস্তবায়নের জন্যও দুর্দান্ত কাজ করে! :)

— উইল স্ট্রোহল

দুর্দান্ত ... এটি একটি গৃহীত উত্তর হিসাবে ভোট দেওয়া উচিত!

— ভেলু

এই নিখুঁত উত্তর

— দিপু

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

আমার মতে এটিই সেরা সমাধান।

— ব্যবহারকারী 216661

বুটস্ট্র্যাপে নতুন হলে, সারিগুলি সংজ্ঞায়িত করার প্রয়োজন হয় না এই বিষয়টি উপেক্ষা করা সহজ। এটি নিখুঁতভাবে কাজ করেছে এবং ডানকের সমাধানটির আরও কিছুটা সম্পূর্ণ সংস্করণ।

— ফসপ্লেট

আমি ঠিক এটিই খুঁজছিলাম।

— হিনরিচ

@ স্পস্প্লেইট ডানকান এর থেকে এই কী লাভ?

— জেপে

Answer 4

আপনি যা অর্জন করতে চান তা কার্যকর হতে পারে, তবে আরও একটি বিকল্প রয়েছে যা আমি বিশ্বাস করি আপনি সম্ভবত এটি উপেক্ষা করছেন যা আরও সহজ।

আপনি সঠিক, বুটস্ট্র্যাপ টেবিলগুলি অদ্ভুতভাবে কাজ করে যখন আপনার কলামগুলি থাকে যা উচ্চতা স্থির হয় না। তবে, এই সমস্যাটি মোকাবেলা করতে এবং প্রতিক্রিয়াশীল পুনরায় সেট করতে একটি বুটস্ট্র্যাপ শ্রেণি তৈরি করা হয়েছে ।

<div class="clearfix"></div>ভাসমানগুলি পুনরায় সেট করতে এবং কলামগুলি তাদের সঠিক অবস্থানে ফিরে আসার জন্য প্রতিটি নতুন সারি শুরুর আগে খালি তৈরি করুন ।

এখানে একটি হল bootply ।

Comments

এটি প্রতিটি .row বুটস্ট্র্যাপের জন্য থাকা marginণাত্মক 15px মার্জিনটিকে সমাধান করে না।

— লোগাস

flexকলামগুলি একই উচ্চতা তৈরি করতে কাজ করে ?

— অ্যালিসন

Answer 5

আপনার পরামর্শের জন্য ধন্যবাদ, আপনি আমাকে সঠিক পথে পেয়েছেন!

আসুন একটি সম্পূর্ণ ব্যাখ্যা জন্য যান:

• ডিফল্টরূপে AngularJS http পান ক্যোয়ারী একটি বস্তুকে ফেরত দেয়

• সুতরাং আপনি যদি @ অ্যারিল অ্যারে.প্রোটোটাইপ.চাঁক ফাংশনটি ব্যবহার করতে চান তবে আপনাকে প্রথমে বস্তুকে অ্যারেতে রূপান্তর করতে হবে।

• এবং তারপরে আপনার কন্ট্রোলারে অংশটি ফাংশনটি ব্যবহার করতে অন্যথায় যদি সরাসরি এনজি- রিপিটে ব্যবহার করা হয়, এটি আপনাকে একটি সংশোধন ত্রুটিতে নিয়ে আসে । চূড়ান্ত নিয়ামক দেখায়:

  // 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);
  });

এবং এইচটিএমএল হয়ে যায়:

<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);
    });

এইচটিএমএল উপরের মত একই থাকুন।

অপ্টিমাইজেশান

সাসপেন্সে শেষ প্রশ্নটি হল: কীভাবে জাঙ্ক্রিপ্ট স্ক্রিটের অ্যারে না বাড়িয়ে 100% অ্যাঙ্গুলারজেএস করা যায় ... কিছু লোক যদি আমাদের দেখাতে আগ্রহী হয় যদি এনজি-রিপিট-স্টার্ট এবং এনজি-রিপিট-এন্ডে যাওয়ার উপায় হয় .. . আমি কৌতুহলী ;)

অ্যান্ড্রির সমাধান

@ অ্যান্ড্রুকে ধন্যবাদ, আমরা এখন প্রতিটি তিনটি (বা যে কোনও সংখ্যক) উপাদান বুটস্ট্র্যাপ ক্লিয়ারফিক্স ক্লাস যুক্ত করা বিবিধ ব্লকের উচ্চতা থেকে প্রদর্শন সমস্যার সংশোধন করি।

সুতরাং এইচটিএমএল হয়ে যায়:

<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 এনজি-রিপিট ব্যবহার করুন।

প্রদর্শনের জন্য অ্যারে তৈরি করতে এই ফাংশনটি সেই পণ্যগুলির মতো ব্যবহার করুন ch

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 টি কলাম থাকবে। সমস্যাটি হচ্ছে, আমি এখানে শেষ 2 সারি খালি থাকায় 5 টি সারি পাচ্ছি। ভাবছেন কীভাবে এটিকে ঠিক করবেন? ধন্যবাদ

— ম্যাভারিক রিজ

@ মাভারিকএজি চেষ্টা করার জন্য ধন্যবাদ। আমি জানি একটি সমস্যা আছে যে যদি এই উপাদানগুলির উচ্চতা আলাদা হয় তবে এটি ভাল কাজ করে না।

— ওয়াটারু

উপাদানগুলির উচ্চতা আসলে একই রকম। সমস্যাটি হচ্ছে, আমার কেবলমাত্র 3 টি সারি পাওয়া উচিত তবে শেষ 2 টি সারি দিয়ে 5 টি সারি পাওয়া উচিত। আপনি কি আমাকে বলতে পারবেন যদি product.leth 5 হয়, তবে 5/2 + 1 =? এই যুক্তিটি আমার জন্য ক্লাস সারির 2 নং লাইনে পরিষ্কার নয়।

— ম্যাভেরিক রিজ

@ ম্যাভারিকএজি those খালি সারিগুলি যেমন হয় তেমনই তৈরি করা উচিত। এটি কি আপনার লেআউটটিকে গোলমাল করে?

— ওয়াটারু

না, এটি লেআউটটি বিশৃঙ্খলা করে না। খালি সারিগুলির বিষয়ে কেবল উদ্বেগ। আপনি যদি আমাকে এটিতে সহায়তা করতে পারেন তবে সত্যই প্রশংসা করুন। ধন্যবাদ

— ম্যাভারিক রিজ

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ক্লিয়ারফিক্সের উপর সামগ্রী বাড়ানোর জন্য যুক্ত করেছি ng-repeat-startএবং পরিবর্তে এবং ব্যবহার করে আমি ধারক ডিভটি সরিয়েছিng-repeat-end (AngularJS 1.2 থেকে উপলব্ধ) কারণ এটি জেড-সূচকটি কাজ করছে না।

আশাকরি এটা সাহায্য করবে!

হালনাগাদ

প্লাঙ্কার: http://plnkr.co/edit/4w5wZj

Comments

flexকলামগুলি একই উচ্চতা তৈরি করতে সারিগুলিতে কাজ করে ?

— অ্যালিসন

আমি নিশ্চিত না যে আমি আপনার প্রশ্নটি বুঝতে পেরেছি। এই কোডটি কী করে তা আপনাকে দেখানোর জন্য এটি একটি দ্রুত প্লামকার: plnkr.co/edit/4w5wZj?p= পূর্বরূপ । কথায়, ক্লিয়ারফিক্স শিরোনামের দ্বিতীয় লাইনটি সঠিকভাবে সারিবদ্ধ করে: সেগুলি সমস্ত একই পয়েন্ট থেকে শুরু হয় তবে তাদের এখনও একই উচ্চতা নেই (যেমন আপনি পটভূমির রঙের জন্য ধন্যবাদ দেখতে পারেন)। ডিফল্ট আচরণ কী তা দেখতে ক্লিয়ারফিক্স ক্লাসটি মুছতে চেষ্টা করুন। আমি কেবল এক বা দুইবার ফ্লেক্সবক্স ব্যবহার করেছি তবে এতে প্রচুর CSS বৈশিষ্ট্য রয়েছে এবং আমি নিশ্চিত যে আপনি যা সন্ধান করছেন তা পাবেন।

— ম্যাকজিওগেন

লম্বা কলামটির একই উচ্চতা পেতে কীভাবে সমস্ত কলাম একই সারিতে তৈরি করা যায় তার একটি উদাহরণ বুটস্ট্র্যাপ দেয় । আমাকে এটি ব্যবহার করতে হয়েছিল। সমস্যাটি হ'ল এটি যখন 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

ক্লাস প্রয়োগের সর্বোত্তম উপায় হ'ল এনজি-ক্লাস ব্যবহার করা। এটি কিছু শর্তের ভিত্তিতে ক্লাস প্রয়োগ করতে ব্যবহৃত হতে পারে।

<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, যা আমাদের সমান উচ্চতার সাথে কলাম তৈরি করতে দেয়, এটি শেষ সূচকটিও পরীক্ষা করে, এবং আপনাকে অভ্যন্তরীণ এইচটিএমএল পুনরাবৃত্তি করতে হবে না। এটি ব্যবহার করে না 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

@ হালসার সমাধানে সামান্য বিট পরিবর্তন

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

ধারকগুলির সংখ্যা দ্রুত একটি নিয়ামক কার্যে কোড করা যায়:

জেএস (ইএস 6)

$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>উত্স টেমপ্লেটে আইটেমটির মার্কআপটি ( এই ক্ষেত্রে) সদৃশ করা এড়ানো থেকে বিরত থাকে - সাধারণ স্প্যানের জন্য বিশাল জয় নয়, তবে আরও জটিল ডিওএম কাঠামোর (যা আমার ছিল) এটি টেমপ্লেটটি DRY রাখতে সহায়তা করে।

Answer 17

2019 আপডেট করুন - বুটস্ট্র্যাপ 4

যেহেতু বুটস্ট্র্যাপ 3 ব্যবহৃত ভাসমান, তাই কলামগুলির অসম মোড়ানো রোধ করার জন্য ক্লিয়ারফিক্স প্রতিটি এন (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>