محاذاة بيانات AngularJS ng-repeat في ثلاثة أعمدة Bootstrap

يوفر AngularJS تكرار ng لإنشاء عناصر ديناميكيًا بناءً على مجموعة من البيانات. عندما تتعامل مع عدد كبير من العناصر، فإن محاذاتها في أعمدة يمكن أن تعزز واجهة المستخدم وسهولة القراءة.

التحويل القائم على وحدة التحكم

الأسلوب المفضل هو تحويل البيانات داخل وحدة التحكم باستخدام وظيفة قطعة JavaScript، والتي تقسم البيانات إلى مجموعات متساوية الحجم:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
يمكن بعد ذلك عرض البيانات المقطوعة المحولة في العرض كما يلي:

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