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>

我的结果几乎是正确的，问题是“Items”没有单独显示。相反，它只显示整个阵列。

以下图片中的示例：

我可以在 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

每个列表中的项目都可以使用列表显示，例如：unordered list（即<ul>）或ordered list（即<ol>）， 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>

<label>仅允许包含Phrasing content ²，但列表为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的参数部分了解支持的格式

² _{https://developer.mozilla.org/en-US/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>

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

4 个答案: