使用ng-repeat来传播包含另一个ng-repeat列表的列表

Using ng-repeat to propagate a list containing another ng-repeat list

本文关键字：列表 ng-repeat 另一个 传播 使用 包含      更新时间：2023-09-26

我正在尝试制作一个传播n个对象的角列表，并在列表项中，再次使用ng-repeat从对象的属性中创建一个水平列表这是一个数组

我如何做到这一点?

这是我目前正在处理的对象:

    $scope.profileCompare = {
        You: {
            questionAnswer: [false, true, false, false, false, false],
            questionImportance: [false, true, false]
        },
        Pizza: {
            questionAnswer: [true, false, false, false, false, false],
            questionImportance: [false, false, true]
        },
        Greenie: {
            questionAnswer: [false, false, false, false, true, false],
            questionImportance: [true, false, false]
        }
    }

在如何使用ng-repeat到达questionAnswer属性以在第一个ng-repeat的每个<li>中创建水平列表方面没有实际进展。但是当我们进入

时我会更新它

第一级不是数组，而是键值对的字典。

可以使用对象语法(key, value)遍历第一层，然后使用数组语法遍历第二层;如下所示:

<table>
  <tr ng-repeat="(key, value) in profileCompare">
    <td>{{key}}</td>
    <td ng-repeat="answerswer in value.questionAnswer track by $index">{{answer}}</td>
  </tr>
</table>

在您的例子中，value将是一个对象，具有2个属性，questionAnswer和questionImportance。

使用这种语法的缺点是顺序是由浏览器设置的，可能与数据集中定义的顺序相同，也可能不相同。如果你希望能够过滤、排序等数据，你需要首先将对象转换为数组;angular文档建议使用angular- toarrayfilter来完成这个任务。

如果要遍历第一层，则需要以下语法:

ng-repeat="(key, value) in profileCompare"

之后，可以很直接地遍历数组属性:

完整的HTML:

<div ng-repeat="(key, value) in profileCompare">
  <h2>{{key}}</h2>
  <h3>Answers</h3>
  <ul>
  <li ng-repeat="answerswer in value.questionAnswer track by $index">
    {{answer}}
  </li>
  </ul>
  <h3>Question importance</h3>
  <ul>
    <li ng-repeat="importance in value.questionImportance track by $index">
      {{importance}}
    </li>
  </ul>
</div>

请注意$index的跟踪，因为您是在迭代布尔值，它肯定有重复项。

这是一个plunkr: http://plnkr.co/edit/U20nzazg0O9qnksFIze2?p=preview

相关文章：