باستخدام نغ-كرر مؤشر لعرض هتمل مختلفة

Question

أنا باستخدام الزاوي و نغ-كرر وكذلك شبكة واجهة المستخدم الدلالية تخطيط.

أحاول عرض 5 أعمدة على التوالي.عند الوصول إلى العنصر الخامس ، قم بإنشاء صف جديد.أدناه بإنشاء صف جديد وعمود لكل عنصر في البيانات.أستطيع أن أرى أن هناك خاصية مؤشر مع نغ-كرر ولكن لست متأكدا من كيفية القول أساسا if mod 5 == 0 إخراج عنصر صف جديد آخر فقط إخراج عمود جديد.

<div class="ui grid">
    <div class="row" ng-repeat="item in data.results">
        <div class="column">
            <div class="ui segment">
                {{item.original_title}}
            </div>
        </div>
    </div>
</div>

شكرا على المساعدة

Answer 1

الطريقة الأنظف والأكثر قابلية للصيانة ستكون في رأيي لكتابة توجيه.في أتش تي أم أل لديك ببساطة:

<grid source="data.results" break="5" />

وفي جس الخاص بك يمكنك كسر البيانات الخاصة بك في الهيكل الصحيح داخل وحدة تحكم وإخراجه باستخدام القالب:

    angular.module('yourApp', [])
    .directive('grid', function() {
      return {
          restrict: 'E',
          scope: {
            break: '=break',
            source: '=source'
          },
          controller: function($scope) {
            var total = Math.ceil($scope.source.length / $scope.break);
            $scope.data = new Array(total);
            for (var i = 0; i < total; ++i) {
              $scope.data[i] = $scope.source.slice(i * $scope.break, (i + 1) * $scope.break);
            }
          },
          template:
            '<div class="ui grid">' +
            '  <div class="row" ng-repeat="row in data">' +
            '    <div class="column" ng-repeat="item in row">' +
            '      <div class="ui segment">' +
            '        {{item.original_title}}' +
            '      </div>' +
            '    </div>' +
            '  </div>' +
            '</div>',
          replace: true
      };
  });

Answer 2

إليك طريقة واحدة للتعامل مع هذا باستخدام مرشح النطاق.

نحسب عدد الصفوف التي ستحتاج إليها (البيانات.النتائج.الطول / 5) ثم كرر هذا العدد من الصفوف باستخدام ng-repeat مع مرشح النطاق.

ثم داخل كل صف نحن slice خارج الأعمدة اللازمة لهذا الصف وإنشاء تلك الأعمدة مع آخر ng-repeat.

<div class="row" ng-repeat="n in [] | range:(data.results.length/5)+1">
    <span ng-repeat='item in data.results.slice($index*5,($index*5+5))'>
        <div class="column">
           <div class="ui segment">
              {{item.original_title}}
           </div>
        </div>
    </span>
</div>

ومرشح النطاق المرتبط (من: http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops):

app.filter('range', function () {
  return function (input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
        input.push(i);
    }
    return input;
};

وهنا كمان من هذا: http://jsfiddle.net/BMrNs/1/

Answer 3

حاول استخدام نغ التبديل في تركيبة مع Array.slice() إنها ليست الطريقة الأكثر فاعلية ولكن إذا لم يكن لديك أي طريقة للتدخل في تمثيل البيانات ، فهذا هو أفضل ما يمكنني التفكير فيه.

<div class="ui grid">
    <div ng-repeat="item in data.results">
        <div ng-switch on="$index % 5">
            <div ng-switch-when="0" class="row">
                <div ng-repeat="e in data.results.slice($index, $index + 5)">
                      <div class="column">
                          <div class="ui segment">
                              {{e.original_title}}
                          </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
</div>