在 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

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

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

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

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

编辑：

实现此目的的另一种方法（用更少的行）是使用：

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

注意：虽然这个方法更短，但实际上运行时间更长，因为 cpu 每次都在创建一个“新”数组。