How can I immitate a for loop with ng-repeat angularjs?

Question

I'm trying to display a list inside a list. This loop works in JavaScript.

for ( i=0; self.InsuredCommoditiesList.length > i; i++){
       self.CommoditiesCategories = self.InsuredCommoditiesList[i].Category;
           for (j = 0; self.InsuredCommoditiesList[i].Items.length > j; j++) {
                        self.CommoditiesList = self.InsuredCommoditiesList[i].Items[j]; 
                    }

This is the body of my ng-repeat

<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
        {{commo.Category}}
       <input type="checkbox"> {{commo.Items}}
</label>

And my result is almost correct, the problem is that "Items" are not being display individually. Instead it's just showing the whole array.

Example in the following picture:

Can I use something similar to position "j" in my ng-repeat to display the items individually?

Answer 1

The items in each list can be displayed using a list, for example: an unordered list (i.e. <ul>) or an ordered list (i.e. <ol>), with a list item (i.e. <li>) for each item in the array. In the example below, item is analogous to self.InsuredCommoditiesList[i].Items[j] in the for loop of the regular JavaScript example.

<ul>
    <li ng-repeat="item in commo.Items">{{item}}</li>
</ul>

In fact, there is a repeat_expression¹ where j could be used in a similar manner: (key, value) in expression, which would look like below:

<li ng-repeat="(j,item) in commo.Items">{{item}}</li>

A <label> is only permitted to only contain Phrasing content² but the lists are Flow Content so move the ngRepeat up to another parent element like a <div> or a <span>. Then make the label, input and list tags child elements.

<div ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
    <label for="checkbox_{{$index}}">{{commo.Category}}</label>
    <input type="checkbox" id="checkbox_{{$index}}">
    <ul>
        <li ng-repeat="item in commo.Items">{{item}}</li>
    </ul>
</div>

See a demonstration of this below.

angular.module('QQapp', [])
  .controller('ctrl', function($scope) {
    this.InsuredCommoditiesList = [{
        "id": 3,
        "Category": "Agricultural liquids - Petroleum",
        "Items": ["100% Produce", "Alcohol", "Appliances"]
      },
      {
      "id": 4,
        "Category": "Grocery Items (dry)",
        "Items": ["Candy", "Canned goods", "Containers"]
      },
      {
      "id": 6,
        "Category": "Building materials",
        "Items": ["Alfalfa", "All Non-perishable General Merchandise", "Almonds"]
      }
    ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="QQapp" ng-controller="ctrl as QQCtrl">
  <span ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
    <label for="checkbox_{{$index}}">{{commo.Category}}</label>
    <input type="checkbox" id="checkbox_{{$index}}">
    <ul>
      <li ng-repeat="(j,item) in commo.Items" id="{{commo.id}}_{{j}}" >{{item}}</li>
    </ul>
  </span>
</div>

---

¹ refer to the Arguments section of ngRepeat for supported formats

²_{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label}

Answer 2

You need to replace the inner loop of your equivalent javascript code in angularjs as well, i.e. you will need one more ng-repeat.

Something like:

<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
        {{commo.Category}}
       <input type="checkbox" ng-repeat="item in commo.Items"> {{item}}
</label>