使用ng-repeat angular循环遍历一组对象

时间:2015-04-05 10:22:15

标签: arrays angularjs loops object ng-repeat

我无法找到一种方法来循环使用带角度的json对象数组。

我的数组在firebug中看起来像那样(每个对象系列都有一个索引值。):

 [[0], Object { idliste=0, id=1, photo="pot.jpg", plus...}, Object { idliste=0, id=3, photo="pot.jpg", plus...}]

 [[1], Object { idliste=1, id=1, photo="pot.jpg", plus...}, Object { idliste=1, id=3, photo="pot.jpg", plus...}]

 [[2], Object { idliste=2, id=1, photo="pot.jpg", plus...}, Object { idliste=2, id=3, photo="pot.jpg", plus...}]

它由以下代码生成:

        var idListe = $scope.getIdListe();
        $scope.listeCommandes[idListe]= new Array([idListe]);

        for (i=0;i<$scope.panier.length;i++){

                        $scope.listeCommandes[idListe].push({
                            idliste:idListe,
                            id:     $scope.panier[i].id,
                            photo:  $scope.panier[i].photo,
                            nom:    $scope.panier[i].nom,
                            quantite:$scope.panier[i].quantite, 
                            prix:   $scope.panier[i].prix,
                            heureajout:$scope.getHeure()
                        });

                    };

$scope.getIdListe = function(){
        var idListe = $scope.listeCommandes.length;
        return idListe;
    };

html是:

<div ng-repeat="idliste in listeCommandes" >
        <div ng-repeat="(nom, id) in idliste">
             {{nom}} : {{id}}
        </div>
</div>

它不起作用。我真的无法弄清楚如何使其工作,这意味着,只需按照索引编号打印每个对象。

如果你有任何想法,那就谢谢了。我搜索过论坛但找不到任何解决方案。也许这就是我创建一个错误的索引的方式?

1 个答案:

答案 0 :(得分:1)

最后通过在这个例子中添加一个名为angular-filter的角度模块来回答我的问题:

http://jsbin.com/weyov/45/edit?html,js,output

非常感谢你的帮助。

现在我的代码看起来像这样:

var idListe = $scope.getIdListe();

    for (i=0;i<$scope.panier.length;i++){

                    $scope.listeCommandes.push({
                        idliste:idListe,
                        id:     $scope.panier[i].id,
                        photo:  $scope.panier[i].photo,
                        nom:    $scope.panier[i].nom,
                        quantite:$scope.panier[i].quantite, 
                        prix:   $scope.panier[i].prix,
                        heureajout:$scope.getHeure()
                    });

                };

和html:

    <ul ng-repeat="(key, value) in listeCommandes | groupBy: 'idliste'">
  Group name: {{ key }}
  <li ng-repeat="article in value">
    article: {{ article.nom}} 
  </li>
</ul>

然后我的订单现在全部按照html视图中的ID自动分组:

    Group name: 0
article: Pots Gris
article: Pot Vert

Group name: 2
article: Pot Bleu
article: Pot Vert
article: Pinceaux

Group name: 5
article: Pots Gris
article: Pot Vert
article: Pot Rouge
article: Pot Bleu