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

【问题标题】：How can I immitate a for loop with ng-repeat angularjs?如何使用 ng-repeat angularjs 模仿 for 循环？
【发布时间】：2018-02-10 00:24:11
【问题描述】：

我正在尝试在列表中显示一个列表。此循环在 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 中使用类似于 position "j" 的东西来单独显示项目吗？

【问题讨论】：

标签： javascript angularjs for-loop angularjs-ng-repeat

【解决方案1】：

每个列表中的项目都可以使用列表来显示，例如：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}

【讨论】：

【解决方案2】：

你可以试试这个：

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

【讨论】：

【解决方案3】：

您的 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 是一个字符串列表应该可以工作

【讨论】：

【解决方案4】：

您还需要在 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>

【讨论】：