如何用AngularJS将嵌套JSON对象渲染为Bootstrap同行列布局？

你当前代码的问题在于：每个product对应的外层<div>是块级元素，它会把该产品下的设备列包裹起来，打断Bootstrap的栅格布局逻辑，导致设备按产品分组换行。下面提供几种可行的解决方案：

方案一：控制器预处理扁平化数组（最简单直接） #

在AngularJS控制器里，先把所有产品的设备合并成一个一维数组：

// 假设你的数据源存储在$scope.obj中
$scope.allDevices = [];
angular.forEach($scope.obj.products, function(product) {
    $scope.allDevices = $scope.allDevices.concat(product.devices);
});

然后在视图中直接遍历这个扁平化后的数组：

<div class="row">
    <div class="col-3" ng-repeat="device in allDevices">
        {{device.label}}
    </div>
</div>

方案二：去掉多余外层容器，用无DOM渲染的嵌套循环 #

无需修改控制器，通过ng-repeat-start和ng-repeat-end实现无额外容器的嵌套循环，同时用ng-if="false"让外层循环生成的空div不渲染：

<div class="row">
    <div ng-repeat-start="product in obj.products" ng-if="false"></div>
        <div class="col-3" ng-repeat="device in product.devices">
            {{device.label}}
        </div>
    <div ng-repeat-end ng-if="false"></div>
</div>

最终生成的DOM结构会和你期望的完全一致，所有col-3直接作为row的子元素。

方案三：自定义过滤器扁平化数组 #

如果不想修改控制器逻辑，可以通过自定义过滤器处理数组：
先在模块中注册两个过滤器：

var app = angular.module('yourApp', []);

// 提取数组对象的指定属性
app.filter('map', function() {
    return function(arr, prop) {
        return arr.map(function(item) {
            return item[prop];
        });
    };
});

// 扁平化二维数组
app.filter('flatten', function() {
    return function(arr) {
        return [].concat.apply([], arr);
    };
});

然后在视图中组合使用过滤器：

<div class="row">
    <div class="col-3" ng-repeat="device in obj.products | map:'devices' | flatten">
        {{device.label}}
    </div>
</div>

以上三种方法都能让所有设备的col-3元素直接作为row的子元素，符合Bootstrap栅格的布局规则，实现横向并排显示。

内容的提问来源于stack exchange，提问作者Navorski