如何使用 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 代码中有两个循环，因此您需要 angular 中的两个循环来遍历内部列表。

    <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

你可以试试这个：

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

Answer 4

每个列表中的项目可以使用列表显示，例如：数组中每个项目的unordered list (i.e. <ul>) or an ordered list (i.e. <ol>), with a list item（即<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>

A <label> 只允许包含 Phrasing content² but the lists are Flow Content so move the 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/en-US/docs/Web/HTML/Element/label}

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

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

javascript

for-loop

angularjs

angularjs-ng-repeat