[angularjs] Angular ng-repeat는 3 개 또는 4 개의 열마다 부트 스트랩 행을 추가합니다.

제안 해주셔서 감사합니다.

완전한 설명을 위해 가자 :

• 기본적으로 AngularJS http get 쿼리는 객체를 반환합니다.

• 따라서 @Ariel Array.prototype.chunk 함수를 사용하려면 먼저 객체를 배열로 변환해야합니다.

• 그런 다음 컨트롤러 에서 청크 기능을 사용하려면 ng-repeat에 직접 사용하면 infdig 오류가 발생 합니다. 최종 컨트롤러는 다음과 같습니다.

  // 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 파일에서 {} 객체 대신 배열 []을 직접 반환하기로 결정했습니다. 이렇게하면 컨트롤러는 다음과 같이됩니다 (특정 구문 isArray : true ).

    // 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은 위와 동일합니다.

최적화

서스펜스의 마지막 질문은 청크 함수를 사용하여 자바 스크립트 배열을 확장하지 않고 100 % AngularJS로 만드는 방법입니다. . 궁금해 😉

ANDREW의 솔루션

@Andrew 덕분에 이제 우리는 3 개 (또는 숫자에 관계없이) 요소마다 부트 스트랩 clearfix 클래스를 추가하면 다른 블록의 높이에서 표시 문제가 수정된다는 것을 알게되었습니다.

따라서 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;
        });

답변

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

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

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