Question

我正在尝试创建一个传播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>内创建水平列表，没有真正的进展。但我会在我们去的时候更新

Answer 1

您的第一个级别不是数组，它是键值对的字典。

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

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

在您的情况下，value将是一个对象，包含2个属性，questionAnswer和questionImportance。

使用此语法的缺点是订单是由浏览器设置的，可能与数据集中定义的顺序相同也可能不同。如果您希望能够过滤，订购等数据，则需要先将对象转换为数组; angular documentation建议使用angular-toArrayFilter执行此任务。

Answer 2

如果要迭代第一级，则需要以下语法：

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

之后，它非常直接地迭代你的数组属性：

这是完整的HTML：

<div ng-repeat="(key, value) in profileCompare">
  <h2>{{key}}</h2>
  <h3>Answers</h3>
  <ul>
  <li ng-repeat="answer 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 注意跟踪，因为你正在迭代布尔值，这肯定会有重复。

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

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

2 个答案: