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には何を入力する必要がありますか？ P.P.私は、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-loopsです。私はすでに考えていましたが、フィルタリングの後、フィルタのパラメータに合った要素を持つ新しい行に、再構造の代わりに2〜3つのlementsを持つ行がたくさん見えました。回答がない場合は、フィルタに適合しない商品をすべて無効にすることができます。 – 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で配列を繰り返して改行します。

答えて

関連する問題