javascript - ng-repeat 遍历对象中的对象

标签 javascript angularjs loops angularjs-ng-repeat ng-repeat

我很困惑如何遍历这个数据模型。

$scope.object = [ {person1: {name: 'jon', height: 100}} , {person2: {name: 'joe', height: 200}}, {person3: {name: 'lisa', height: 150}}]

我正在像这样尝试 ng-repeat

<tr ng-repeat = "person in object[0]">
    <td>{{person.name}}</td>
</tr>

这当然只会显示“jon”。我怎样才能得到所有人(x).name?我可以将他们全部命名为 person 而不是 person1、person2,但我的项目数据模型不允许这样做。能做什么?

谢谢

最佳答案

撇开对象数据中缺少的大括号,您可以做一些愚蠢的事情

<tr ng-repeat="person in object">
    <td ng-repeat="keys in person">
        {{keys.name}}
    </td>   
</tr>

...这会做你想做的事(内部 ng-repeat 只会循环一次,因为每个“人”只有一个键(“person1”,“person2”...)但更好的解决方案是可能要更改您的数据结构以删除那些不必要的 person1、person2 等标识符并将其视为数组:

$scope.object = [
    {name:'Joe'},
    {name:'Susan'}
];

或者去掉数组中括号,把它当作一个哈希表:

$scope.object = {
    person1: {name:'Bob'}, 
    person2: {name:'Ted'}
};

使用这些数据结构中的任何一个,您的 HTML 模板都将是相同的:

<tr ng-repeat="person in object">
    <td>{{person.name}}</td>
</tr>

现在您正在尝试将其结构化为数组和散列,这没有任何好处,只会让访问数据变得更加笨拙。

关于javascript - ng-repeat 遍历对象中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24559290/

相关文章:

javascript - 我如何像 Java 包一样组织我的 Angular 应用程序文件夹?

javascript - 在javascript中对数组的索引进行排序

javascript - 如何在文档准备好时在 AngularJS Controller 中运行功能?

javascript - 我可以使用数组迭代器执行与 for 循环相同的功能吗?

python - 寻找满足阈值关系的组合

c - 需求中的 for 循环错误 (C)

javascript - 在悬停元素上监听 Keydown 事件

javascript - 如何在 Angular/javascript中使用格式(yyyy-dd-mm)在日中 trim 0但不在月份中 trim 0?

javascript - Angular 2 向兄弟指令(组件)发送事件

javascript - 使用基于 html-5 数据属性的 javascript 选择复选框