끊김없이 ngRepeat를 통해 배열을 반복합니다.

당신의 도움이 필요합니다. 온라인 시장을 만들려고하기로 결심했습니다. AngularJS의 일부분에 새로운 것이었고 이것은 ng-repeat에서 이러한 문제에 직면했을 때 처음입니다.끊김없이 ngRepeat를 통해 배열을 반복합니다.

<div class="goods"> 
    <div class="goods-row" ng-repeat="???"> 
     <div class="good" ng-repeat="???"> 
      <button id="add_to_cart">+</button> 
      <div class="descr"> 
       <div class="descr-top"> 
        <h5 class="g-name"> 
         NAME IS HERE 
        </h5> 
        <span class="g-price"> 
         PRICE IS HERE 
        </span> 
       </div> 
       <div class="descr-mid" ng-bind="good.description"></div> 
      </div> 
     </div> 
    </div> 
</div>

"제품"(제품 수준) "제품의 행"(제품 행)를 포함 나는 (그것의 필요한 부분이다) 다음과 같은 HTML 구조를 가지고있다. 모든 행에는 (기본적으로) 4 개의 상품 (양호한)이 포함되어야하지만 유연한 솔루션이 필요하기 때문에 연속적으로 보이는 상품의 수를 바꿀 수있는 필터를 사용한다는 사실을 알아야합니다. ng-repeat에 무엇을 입력해야합니까? 오후 8시 30 분 P.S. JS 코드 (아래에 게시 됨)가있는 청사진을 만들었습니다. 원하는 것을 어떻게 든 보여 주지만 AngularJS에서 만드는 방법은 무엇입니까?

var arr = []; 
for (i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) { 
    arr.push({ 
     number: i 
    }); 
} 
var divider = 4; 
for (var i = 0; i < arr.length;) { 
    for (var j = 0; j < divider; j++) { 
     if ((j + i) < arr.length) { 
      console.log(arr[j + i]); 
     } 
    } 
    i = i + divider; 
    console.log(" "); 
}

출처

2016-07-01 ShiiRochi

대신 ng-repeat 필터 (사용자 정의 여부) 및 limitTo 필터를 사용하여 수행 할 수있는 경우에 필요한 구조를 생성 보기 (즉, 행의 배열, 각 행은 4 개의 상품의 배열 임), 그리고 그 구조를 반복합니다. –

청사진의 주요 부분은 for 루프입니다. 배열을 어떻게 만들었더라도 마찬가지입니다. 나는 이미 생각해 봤지만, 필터링을 한 후에 필터의 매개 변수에 맞는 요소를 가진 새로운 행에 구조를 바꾸지 않고 2 또는 3 개의 레이션으로 많은 행을 볼 수있었습니다. 답변이 없으면 필터에 맞지 않는 모든 상품을 사라지게 할 수 있습니다. – ShiiRochi

필터 (예 : 가격)를 적용한 후 모든 행을 필터 매개 변수에 맞는 최대 4 개의 요소가 포함 된 새 필터로 다시 구성하십시오. – ShiiRochi

는 lodash 라이브러리를 사용하면 덩어리로 배열을 분할 한 후 필요에 맞는 목록을 작성하는 chunk 기능을 사용할 수 있습니다.

기본적으로 배열의 일반 목록 (상품이 포함 된 행을 나타냄)에서와 같이 반복하고 구분선에 따라이 목록을 작성하는 함수를 구현하십시오. 그렇게하면 목록을 다시 작성해야 할 때 (예를 들어 입력 키 입력시) 함수를 호출하여 AngularJS가 나머지 작업을 수행하도록 할 수 있습니다.

나는 완전히 질문을 이해할 수 없다

(function(angular) { 
 

 
    'use strict'; 
 
    
 
    angular.module('ngRepeat', []) 
 
    .controller('repeatController', function($scope) { 
 
    
 
     // the goods 
 
     $scope.goods = [ 
 
     { name: "name-1", price: 1.01, description: 'desc-1' }, 
 
     { name: "name-2", price: 2.02, description: 'desc-2' }, 
 
     { name: "name-3", price: 3.03, description: 'desc-3' }, 
 
     { name: "name-4", price: 4.04, description: 'desc-4' }, 
 
     { name: "name-5", price: 5.05, description: 'desc-5' }, 
 
     { name: "name-6", price: 6.06, description: 'desc-6' }, 
 
     { name: "name-7", price: 7.07, description: 'desc-7' }, 
 
     { name: "name-8", price: 8.08, description: 'desc-8' }, 
 
     { name: "name-9", price: 9.09, description: 'desc-9' }, 
 
     { name: "name-10", price: 10.10, description: 'desc-10' }, 
 
     { name: "name-11", price: 11.11, description: 'desc-11' }, 
 
     { name: "name-12", price: 12.12, description: 'desc-12' } 
 
     ]; 
 

 
     // divider determines how many goods per row (defaulted to 4) 
 
     $scope.divider = 4; 
 
    
 
     // function that build the rows of goods 
 
     $scope.dividerChanged = function() { 
 
     $scope.rows = _.chunk($scope.goods, $scope.divider); 
 
     }; 
 
    
 
     // initialize rows on first load 
 
     $scope.dividerChanged(); 
 
    }); 
 
})(window.angular);

.divider { 
 
    margin-bottom: 10px; 
 
} 
 
    
 
.goods-row { 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
.good { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    width: 50px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<body ng-app="ngRepeat"> 
 
    <div ng-controller="repeatController"> 
 
    
 
    divider: <input type="text" ng-model="divider" ng-keyup="dividerChanged()" class="divider"> 
 
    
 
    <div class="goods"> 
 
     <div class="goods-row" ng-repeat="row in rows"> 
 
     <div class="good" ng-repeat="good in row"> 
 
      <button id="add_to_cart">+</button> 
 
      <div class="descr"> 
 
      <div class="descr-top"> 
 
       <h5 class="g-name">{{ good.name }}</h5> 
 
       <span class="g-price">{{ good.price | currency }}</span> 
 
      </div> 
 
      <div class="descr-mid">{{ good.description }}</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
</body>

출처

2016-07-01 17:06:00 j3ff

고맙습니다. 시도해 보겠습니다. 배열 배열에서 수동으로 나누는 것보다 유연 해 보이며, 키 업에서 행의 구조를 다시 트리거 할 수 있으므로 필터를 통과하는 요소 - 테스트 (예 : 100보다 큰 가격)가 새 행을 형성하는 데 사용됩니다 – ShiiRochi

, 당신은 필터링 된 배열을 구축을 위해 노력하지만, 항상 상위 4 항목을 표시 할거야?

예, 그것은 당신의 청사진의 값을 로깅

<div ng-repeat="data in test.data | customFilter:test.selectedFilter | limitTo:4">{{data}}</div>

https://jsbin.com/wajapabaro/1/edit?html,js,output

출처

2016-07-01 17:37:10 Icycool

끊김없이 ngRepeat를 통해 배열을 반복합니다.

답변

관련 문제