Angular ng-repeat绑定到数组中的对象数组

Question

我当前的任务是我的服务和客户端之间的消息传递结构的重构。

设置

假设当前正从服务

返回以下JSON响应

{
 Foos: [
          { 
             id: "Foo1"
            ,description: "Flippity Floppity Floop"

          },
          {
             id: "Foo2"
            ,description: "Snoochy Boochy"
          }
      ]
}

在我的Angular视图中，我有以下绑定语句：

<ul>
   <li ng-repeat="foo in Foos">
     <span>{{foo.id}}</span>
     <span>{{foo.description}}</span>
   </li>
</ul>

所有这一切都很好，很好。 为Foos中的每个foo渲染一个li并打印foo.id和foo.description。

重构

数据的结构必须改变。我不能再将我的数组中的每个项目都视为对象了。现在每个都是一个对象数组，旧对象上的属性本身就成了对象（本质上是keyValuePairs）

现在数据如下：

{
  Foos: [
            [
               {"id":"Foo1"},{"description":"Flippity Floppity Floop"}
            ],
            [
               {"id":"Foo2"},{"description":"Snoochy Boochy"}
            ]
        ]
}

我可以预测每个内部数组中维护的键，但是当我现在尝试绑定到Foos中的每个“foo”时，我得到一个重复的项目呈现给屏幕，没有绑定到它的数据。

我现在应该如何将重复的跨度列表绑定到{{foo.id}}和{{foo.description}}？

Answer 1

老实说，我认为转移的结构较差，但将会是什么。

<ul>
  <li ng-repeat="foo in Foos">
    <span>{{foo[0].id}}</span>
    <span>{{foo[1].description}}</span>
  </li>
</ul>

这当然假设嵌套数组将包含指定顺序的属性。

如果这不好并且您实际上想要使用foo.id，您可以自己更新Foos或使用带有ng-repeat的过滤器。

function (foos) {
    return foos.map(function (foo) {
        var obj = {};
        foo.forEach(function (prop) {
            for (var key in prop) {
                obj[key] = prop[key];
            }
        });
        return obj;
    });
}