如何使用ng-repeat angularjs模仿for循环？

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

You need to replace the inner loop of your equivalent javascript code in angularjs as well, ie 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 2

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 3

The items in each list can be displayed using a list, for example: an unordered list (ie <ul> ) or an ordered list (ie <ol> ), with a list item (ie <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 4

You may try for this:

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