在分组 table 中显示数组

Question

我有一个这样的 JSON 数组：

Array = [{"type":"x", "name":"a1"}, 
         {"type":"x", "name":"a2"},
         {"type":"y", "name":"a3"},
         {"type":"y", "name":"a4"}]

现在，我想使用 Angular 在 table 中显示它，因此它采用以下形式：

x
a1
a2
y
a3
a4

table 显示类型，然后显示具有该类型的所有项目的名称。

Answer 1

首先，野人@Morre 是正确的（尽管对他的正确性感到有点兴奋）您拥有的不是 JSON 数组，而是对象数组。但是除了语义...

虽然我相信有一种更优雅的方法可以解决您的问题，但这是一个可能的解决方案

// Given your array
var myArray = [{ 
    "type": "x",
    "name": "a1"
}, {
    "type": "x",
    "name": "a2"
}, {
    "type": "y",
    "name": "a3"
}, {
    "type": "y",
    "name": "a4"
}];

// create a new object structured like this
// {'x': ['a1', 'a2'], 'y': ['a2', 'a3']}
// while creating a new array that's structured like this
// ['x', 'a1', 'a2', 'y', 'a2', 'a3']
var newObj = {};
$scope.newArray = [];
myArray.map(function(obj) { 
    if (!newObj[obj.type]) {
        newObj[obj.type] = [obj.name];
        $scope.newArray.push(obj.type);
        $scope.newArray.push(obj.name);
    } else {
        newObj[obj.type].push(obj.name);
        $scope.newArray.push(obj.name);
    }
});

你的ng-repeat可能看起来像这样

<tr ng-repeat="value in newArray">
    <td>{{ value }}</td>
</tr>

有关详细信息，请参阅 JSFiddle

Answer 2

您可以使用 ngrepeat，但是您需要更改对象结构，使 "type" 成为 "name" 的父级：var obj = {type: 'x', names: [{name:'a1'}, {name:'a2'}]}

或

如果您正在处理大型数据集并且无法更改对象的结构以提高性能，您可能需要考虑编写一个 angular 自定义指令。

在分组 table 中显示数组

Showing an array in a grouped table

javascript

html-table

angularjs