तीन बूटस्ट्रैप कॉलम में AngularJS एनजी-रिपीट डेटा को संरेखित करना

AngularJS डेटा की एक सरणी के आधार पर गतिशील रूप से तत्वों को बनाने के लिए एनजी-रिपीट प्रदान करता है। जब आप महत्वपूर्ण संख्या में तत्वों के साथ काम कर रहे हैं, तो उन्हें कॉलम में संरेखित करने से उपयोगकर्ता इंटरफ़ेस और पठनीयता बढ़ सकती है।

नियंत्रक-आधारित परिवर्तन

पसंदीदा तरीका डेटा को भीतर बदलना है नियंत्रक जावास्क्रिप्ट के चंक फ़ंक्शन का उपयोग करता है, जो डेटा को समान आकार के समूहों में तोड़ता है:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
रूपांतरित chunkedData को इस प्रकार दृश्य में प्रस्तुत किया जा सकता है:

  
{{item}}
दृश्य में फ़िल्टर करना (सावधानी)
हालांकि संभव है, दृश्य में डेटा को विभाजित करने के लिए फ़िल्टर का उपयोग डेटा बाइंडिंग उद्देश्यों के लिए अनुशंसित नहीं है। यदि फ़िल्टर किए गए दृश्य के भीतर इनपुट का उपयोग किया जाता है, तो इससे विसंगतियां हो सकती हैं।
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length) $index 1}}. {{item}}
  </div>
</div>

ऊर्ध्वाधर कॉलम

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

function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i  ) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

CSS कॉलम

वर्टिकल कॉलम बनाने का दूसरा विकल्प CSS कॉलम का लाभ उठाना है:

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>