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

标签 javascript angularjs

<分区>

我正在尝试制作一个传播 n 个对象的 Angular 列表,并在列表项内,再次使用 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 属性以在每个 <li> 中制作水平列表方面没有真正的进展第一个 ng-repeat。但我会在进行时更新它

最佳答案

你的第一层不是数组,它是键值对的字典。

您可以使用对象语法 (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 个属性,questionAnswerquestionImportance

使用这种语法的缺点是顺序是由浏览器设置的,可能与数据集中定义的顺序相同也可能不同。如果您希望能够对数据进行过滤、排序等操作,则需要先将对象转换为数组; angular documentation建议使用 angular-toArrayFilter为了这个任务。

关于javascript - 使用 ng-repeat 传播包含另一个 ng-repeat 列表的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31753163/

相关文章:

javascript - 删除集合中旧消息/帖子的最佳方法?

javascript - 如何添加 Croppie 结果上传 php 并将结果传递到其他 php 页面

javascript - 如何将参数传递给 addEventListener 的回调函数

AngularJS - $scope.$watch 的机制 - 它只是一个观察者模式吗?

css - Angular/Valdr - 将自定义类添加到 valdr-form-group

javascript - Angularjs - 从 JSON 实例化数组

javascript - jquery 图像悬停在我悬停时不断增长

javascript从数字递增到字符串

javascript - 在 Angularjs 指令中从滚动容器 div 的顶部获取元素位置

angularjs - 使用angularjs在本地驱动器中上传文件