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

Question

我正在嘗試在列表中顯示一個列表。 此循環在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]; 
                    }

這是我的ng-repeat的主體

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

我的結果幾乎是正確的，問題是“項目”沒有單獨顯示。 相反，它只是顯示整個數組。

下圖中的示例：

我可以在ng-repeat中使用類似於位置“ j”的東西來單獨顯示項目嗎？

Answer 1

您還需要在angularjs中替換等效的javascript代碼的內部循環，即，您將需要一個以上ng-repeat 。

就像是：

<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

您的JavaScript代碼中有兩個循環，因此需要兩個角度來遍歷內部列表。

    <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>

未經測試，但假定commo.Items是字符串列表，則可以使用

Answer 3

可以使用列表顯示每個列表中的項目，例如： 無序列表 （即<ul> ）或有序列表 （即<ol> ），以及列表中每個項目的列表項 （即<li> ）。陣列。 在下面的示例中， item類似於常規JavaScript示例的for循環中的self.InsuredCommoditiesList[i].Items[j] 。

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

實際上，有一個repeat_expression ¹ ，其中j可以類似的方式使用： (key, value) in expression如下所示：

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

<label>只允許包含短語內容 ^2，但是列表是Flow Content，因此將ngRepeat移至另一個父元素，例如<div>或<span> 。 然后使標簽，輸入和列表標簽成為子元素。

<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>

請參閱下面的演示。

 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> 

---

¹請參閱ngRepeat的Arguments部分以獲取受支持的格式

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

Answer 4

您可以為此嘗試：

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