Angular JSネストされたngRepeatループmaxRowsが限界を超えた後にブレークする方法？

私はresultDataに保存されている下記のJSONの構造を有する：Angular JSネストされたngRepeatループmaxRowsが限界を超えた後にブレークする方法？

{ 
    "ParentObjects": [ 
     { 
      "objId": "A1", 
      "ChildObjects": [ 
       { 
        "description": "child object1" 
       }, 
       { 
        "description": "child object2" 
       } 
      ] 
     }, 
     { 
      "objId": "A2", 
      "ChildObjects": [ 
       { 
        "description": "child object3" 
       }, 
       { 
        "description": "child object4" 
       }, 
       { 
        "description": "child object5" 
       } 
      ] 
     }, 
     { 
      "objId": "A3", 
      "ChildObjects": [ 
       { 
        "description": "child object6" 
       }, 
       { 
        "description": "child object7" 
       } 
      ] 
     } 
    ] 
}

次のように私は私のhtmlで2 ngのリピートを持っている：

<table> 
 
\t <tbody ng-repeat="parentObj in resultData"> 
 
\t <tr ng-repeat="childObj in parentObj.ChildObjects"> 
 
\t \t <td>{{childObj.description}}</td> 
 
\t </tr> 
 
\t </tbody> 
 
</table>

私は<の数を制限したいですtr >は、親と子の数に関係なく4に表示されます。私はlimitToを知っていますが、内側のループにのみ適用され、以前の親オブジェクトによって以前にレンダリングされた行を考慮しません。

すべての子オブジェクトを考慮またはカウントする行を制限できますか？

出典

2016-06-29 user2025527

あなたは、各NG-繰り返し繰り返しは新しいスコープを作成し、LimitToは、その特定に制限されますのでLimitToが、ここでは動作しません

<table> 
 
\t <tbody ng-repeat="parentObj in resultData | limitTo:4"> 
 
\t <tr ng-repeat="childObj in parentObj.ChildObjects "> 
 
\t \t <td>{{childObj.description}}</td> 
 
\t </tr> 
 
\t </tbody> 
 
</table>

出典

2016-06-29 14:52:50

いいえ、これは問題を解決することはできません。レンダリングされた行の総数をカウントする必要があるため、limitToは内側のtrレンダリングにのみ適用されます。 – user2025527

resultDataでlimitToを使用してください。それは働くことができます。 –

NGリピートでlimitToを制限することができます配列またはリスト（ 'ChildObjects'）。

http://plnkr.co/edit/DrJpf4xiPq4AwtMKUQaU

<body ng-app="myApp"> 
    <div ng-controller="myController"> 
    <table> 
     <tbody ng-repeat="parentObj in resultData.ParentObjects"> 
     <tr ng-repeat="childObj in parentObj.ChildObjects | limitTo:4"> 
      <td>{{childObj.description}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body>

あなたはchildObjects配列内の各アイテムのインデックスを設定することによって、これを達成することができます。

http://plnkr.co/edit/pUQAvjkJXkn4JRBx1efh

<html ng-app="plunker"> 

    <body ng-app="plunker"> 
    <div ng-controller="MainCtrl"> 
     <table ng-init="SetIndex()"> 
      <tbody ng-repeat="parentObj in resultData.ParentObjects"> 
       <tr ng-if="childObj.index < 4" ng-repeat="childObj in parentObj.ChildObjects"> 
       <td>{{childObj.description}}</td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </body> 

</html> 

$scope.SetIndex = function() { 
     var item = 0; 
     angular.forEach($scope.resultData.ParentObjects, function (value, key) { 
      angular.forEach(value.ChildObjects, function (value1, key) { 
       value1.index = item; 
       item = item + 1; 
      }); 
     }); 
    }

出典

2016-06-30 15:49:33

Angular JSネストされたngRepeatループmaxRowsが限界を超えた後にブレークする方法？

答えて

関連する問題