J'ai besoin de ton aide. J'ai décidé de tenter de créer une sorte de marché en ligne et je suis en quelque sorte nouveau dans certaines parties d'AngularJS et c'est la première fois que je rencontre un tel problème avec ng-repeat. J'ai la structure html suivante (ce n'est qu'une partie obligatoire):

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

« Marchandises » (classe de marchandises) comprend les « lignes de marchandises » (ligne de marchandises). Chaque ligne doit inclure (par défaut) 4 marchandises (bonne classe), mais il convient également de noter que j'utiliserai un filtre, qui pourrait modifier le nombre de marchandises visibles d'affilée, car j'ai besoin d'une solution flexible. Que dois-je saisir dans ng-repeat ? P.S. J'ai créé un plan avec le code JS (publié ci-dessous), qui montre en quelque sorte ce que je veux, mais comment le faire dans 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(" ");
}
0
ShiiRochi 1 juil. 2016 à 19:11

2 réponses

Meilleure réponse

Avec la bibliothèque lodash, vous pouvez utiliser la fonction chunk pour diviser un tableau en morceaux, puis créer une liste qui convient à votre Besoins.

Donc, en gros, itérez simplement comme vous le feriez pour une liste normale de tableaux (qui représentent vos lignes contenant des marchandises) et implémentez une fonction qui construit cette liste en fonction du diviseur. De cette façon, vous pouvez invoquer la fonction lorsque vous devez reconstruire votre liste (à la clé de l'entrée dans l'exemple ci-dessous) et laisser AngularJS faire le reste.

(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>
1
j3ff 1 juil. 2016 à 21:13

Je ne comprends pas parfaitement votre question, essayez-vous de créer un tableau filtré mais souhaitez-vous toujours afficher les 4 premières entrées ?

Si oui, alors cela peut être fait avec le filtre ng-repeat (personnalisé ou non) et le filtre limitTo

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

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

0
Icycool 1 juil. 2016 à 20:37