在Angular视图中绑定嵌套数组

Question

我无法使用ng-Repeat绑定嵌套数组。有没有办法可以绑定复杂的数组对象来查看。

指令中的范围包含对象。

（指令控制器为 - controllerAs：'srCtrl'）

var vm = this;
vm.resultCategories = [[{"id":3,"name":"name3","desc":"2","categoryId":1,"categoryName":"cat 1"},
{"id":1,"name":"name1","desc":"2","categoryId":1,"categoryName":"cat 1"},
{"id":2,"name":"name2","desc":"2","categoryId":1,"categoryName":"cat 1"}],
[{"id":4,"name":"name4","desc":"name1","categoryId":2,"categoryName":"cat 2"},
{"id":2,"name":"name2","desc":"2","categoryId":2,"categoryName":"cat 2"}]];

绑定指令视图

<ul>
<li ng-repeat="category in srCtrl.resultCategories">
<h3>{{category.categoryName}}</h3>
</li>
</ul>

感谢任何帮助。非常感谢提前。

Answer 1

最好的解决方案是使用reduce函数和concat函数连接所有数组，然后再将其提供给ui。您可以通过过滤器执行此操作，也可以在接收数据时在控制器内执行此操作：

vm.resultCategories = vm.resultCategories.reduce(function(last,next){
    return last.concat(next);
})

注意有一些方法可以添加嵌套的ng-repeat，但不建议这样做有多种原因：

• 您正在使用列表项，这意味着您需要创建div以将它们组合在一起（这可能会影响您的CSS和整体结构）
• 令人困惑的地狱！
• 潜在错误的空间

编辑：

实现这一目标的另一种方式（使用较少的行）是使用：

vm.resultCategories = new Array(vm.resultCategories.join());

注意：虽然这种方法较短，但实际上运行时间较长，因为cpu正在创建一个新的＆＃39;数组每次。