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

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: enter image description here

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_expression1 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 content2 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>
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>
Answer:3

You have two loops in your JavaScript code, so you will need two loops in the angular to go through the inner list.

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

Untested, but should work assuming commo.Items is a list of strings

Answer:4

I'm trying to understand the following pieces of code. If I understand correctly, below I have three resource objects that interact with REST server data sources (these objects are CategorySrv, ...

I'm trying to understand the following pieces of code. If I understand correctly, below I have three resource objects that interact with REST server data sources (these objects are CategorySrv, ...

Hi I am new to react native and I am facing strange issue with routing. I am doing something wrong but need someone to guide me. index.android.js import { LandingScreen } from './src/components/...

Hi I am new to react native and I am facing strange issue with routing. I am doing something wrong but need someone to guide me. index.android.js import { LandingScreen } from './src/components/...

  1. route should declare a screen react native

I am enabling and disabling a div by checking two radio button (yes and no) but I am facing an issue when I am putting both id and class in same div and when I am using two div (one for id as parent ...

I am enabling and disabling a div by checking two radio button (yes and no) but I am facing an issue when I am putting both id and class in same div and when I am using two div (one for id as parent ...

  1. html same class name
  2. html same class different id
  3. html same class
  4. html div class same row
  5. html class name same as id
  6. html repeating same class

Is it possible to get the scroll event fired with onsen ? I tried to remove the onsen css file and it worked, the scroll event was fired. But that's no solution -.- I also tried the ons-scroller tag ...

Is it possible to get the scroll event fired with onsen ? I tried to remove the onsen css file and it worked, the scroll event was fired. But that's no solution -.- I also tried the ons-scroller tag ...

  1. onsen ui scroll event