programing

각도 ng-repeat에 의한 부트스트랩 행 추가(3 또는 4 col마다)

yellowcard 2023. 4. 5. 21:30
반응형

각도 ng-repeat에 의한 부트스트랩 행 추가(3 또는 4 col마다)

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-repeat 패턴(지시문 또는 컨트롤러 없음)만으로 이를 실현할 수 있습니까?이 문서에서는 ng-repeat-start와 ng-repeat-end를 소개하고 있습니다만, 사용법을 알 수 없습니다.이것은 부트스트랩 템플릿에서 자주 사용하는 것 같습니다!감사해요.

투표율이 가장 높은 답변은 효과적이기는 하지만, 내가 생각하는 각진 방식이 아니며, 부트스트랩 자체의 클래스를 사용하는 것도 이 상황에 대처하기 위한 것이 아니다.@와 같이 @claies는.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>

이 구조는 제품 배열의 복잡한 인덱싱을 방지하고 깨끗한 도트 표기를 허용하며 clearfix 클래스를 목적에 맞게 사용합니다.

좀 늦은 건 알지만 그래도 도움이 될 것 같아요.이렇게 했어요.

<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

이 솔루션은 기존 솔루션보다 훨씬 단순하며 장치 폭에 따라 열 너비가 달라집니다.

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

기술(「」(「」)은 제외)ng-if)는 실제로 여기서 문서화되어 있습니다.부트스트랩 문서

당신이 달성하고자 하는 것이 유용할 수도 있지만, 당신이 간과하고 있는 다른 선택지가 훨씬 더 간단하다고 생각합니다.

정답입니다. 열이 고정 높이가 아닐 경우 부트스트랩 테이블이 이상하게 작동합니다.단, 이 문제를 해결하고 응답성 리셋을 수행하기 위해 작성된 부트스트랩클래스가 있어요

을 <div class="clearfix"></div>플로트가 재설정되고 열이 올바른 위치로 돌아갈 수 있도록 새 행이 시작되기 전에 미리 확인해야 합니다.

여기 부트플라이가 있어요

제안해 주셔서 감사합니다.제 길을 잘 잡으셨네요!

자세한 설명을 들어보겠습니다.

  • 디폴트로는 각도JS http get 쿼리가 개체를 반환합니다.

  • @Ariel Array.protype을 사용하는 경우.개체를 배열로 변환하기 위한 청크 함수입니다.

  • 그런 다음 controller에서 청크 함수를 직접 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% 각도 있게 만드는 방법입니다.청크 함수로 javascript 배열을 확장하지 않고 JS를 통해 ng-repeat-start와 ng-repeat-end가 적합한지 알려주시면 감사하겠습니다.궁금해요;)

앤드류 솔루션

@Andrew 덕분에 3개 요소(또는 수에 관계없이)마다 부트스트랩 클리어픽스 클래스를 추가하면 블록의 높이에서 디스플레이 문제가 해결된다는 것을 알 수 있습니다.

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

지시 없이 할 수 있지만 그게 최선의 방법인지 잘 모르겠어요.이를 위해서는 테이블에 표시하는 데이터에서 배열 배열을 만들고 그 후 2ng-repeat을 사용하여 배열 전체를 반복해야 합니다.

표시할 어레이를 작성하려면 해당 제품과 같이 이 기능을 사용합니다.청크(3)

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

그런 다음 2ng-sng-sng를 사용해서

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

Alpar 솔루션을 기반으로 검증된ng-repeat 템플릿만 사용합니다.전체 행과 부분적으로 비어 있는 행 모두에서 작동합니다.

<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

템플릿으로만 해결했습니다.해결책은

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

비록 효과가 없었지만.

@Duncan에 대한 또 하나의 개선점일 뿐이며, 다른 것들은 clearfix 요소에 따라 응답합니다.콘텐츠를 클릭할 수 있도록 하려면z-index0을 넘지 않으면 clearfix가 콘텐츠와 겹쳐 클릭을 처리합니다.

다음 예시는 작동하지 않습니다(커서 포인터는 표시되지 않고 클릭해도 아무 것도 되지 않습니다).

<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: 1clearfix를 사용하여 콘텐츠를 올리고 대신 container div를 제거했습니다.ng-repeat-start그리고.ng-repeat-end(AngularJS 1.2에서 사용 가능) z-index가 작동하지 않기 때문입니다.

이게 도움이 됐으면 좋겠네요!

갱신하다

Pluker: http://plnkr.co/edit/4w5wZj

나는 이것을 ng-class로 해결했다.

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

클래스를 적용하는 가장 좋은 방법은 ng-class를 사용하는 것입니다.어떤 조건에 따라 클래스를 적용하는 데 사용할 수 있습니다.

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

여기서 많은 답변과 제안을 종합해본 결과, 이것이 저의 최종 답변입니다.flex동일한 높이로 열을 만들 수 있습니다. 마지막 인덱스도 확인하며 내부 HTML을 반복할 필요가 없습니다.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>

@alpar의 솔루션에서 약간의 수정이 이루어짐

<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

이 방법은 스플라이싱이나 그 어떤 것도 필요 없이 작동했습니다.

HTML

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

Born Solutions는 최고의 솔루션입니다.요구를 충족시키기 위해 약간의 트위크만 있으면 됩니다.응답성이 뛰어난 솔루션도 있었고 조금 바뀌었습니다.

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

Alpar의 답변을 바탕으로, 다음은 단일 항목 목록을 여러 컨테이너(행, 열, 버킷 등)로 분할하는 보다 일반적인 방법입니다.

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

용기 수는 컨트롤러 함수로 빠르게 코딩할 수 있습니다.

JS(ES6)

$scope.rowList = function(rows) {
  return Array(rows).fill().map((x,i)=>i);
}
$scope.rows = 2;

HTML

<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>이 경우) - 단순한 스팬이 아니라 더 복잡한 DOM 구조의 경우 템플릿을 드라이 상태로 유지하는 데 도움이 됩니다.

업데이트 2019 - 부트스트랩 4

Bootstrap 3은 플로트를 사용했기 때문에 n개(3개 또는 4개) 열마다 clearfix를 리셋해야 했습니다..col-*)의.row기둥의 고르지 않은 래핑을 방지합니다.

Bootstrap 4는 플렉스박스를 사용하기 때문에 열을 따로따로 랩할 필요가 없어졌습니다..row또는 추가 div를 삽입하여 n개 열마다 콜을 강제로 줄 바꿈합니다.

하나의 열에 있는 모든 열을 반복할 수 있습니다..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>

따라서 부트스트랩의 경우 ng-repeat은 다음과 같습니다.

  <div class="row">
      <div class="col-4" ng-repeat="item in items">
          ... {{ item }}
      </div>
  </div>

데모: https://www.codeply.com/go/Z3IjLRsJXX

부스트랩만 사용했는데, 열과 열의 위치에 매우 주의해야 합니다. 예를 들어 보겠습니다.

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

언급URL : https://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols

반응형

'programing' 카테고리의 다른 글

JSON을 해석하고 값을 어레이로 변환하는 방법  (0) 2023.04.05
오류 수정 방법: ./node_modules/@react-leaflet/core/esm/path.js 10:41 모듈 해석 실패:예기치 않은 토큰(10:41)  (0) 2023.04.05
ASP를 참조합니다.JavaScript에서 ID에 의한 NET 제어?  (0) 2023.04.05
실전 가동과 개발의 검출 런타임에 대응  (0) 2023.04.05
Laravel과 함께 리액트라우터를 사용하는 방법  (0) 2023.04.05

'programing'의 다른글

  • 현재글각도 ng-repeat에 의한 부트스트랩 행 추가(3 또는 4 col마다)

관련글

댓글

티스토리툴바