如何通过Javascript/JQuery (Ampersand.js/Angular)用对象数组的对象填充html表

Question

我正在尝试填充一个按类别显示内容的HTML表。我需要在不使用JQuery数据表的情况下做到这一点。所以我试着用一个普通的HTML表来做这件事。

下面是我的对象数组的对象：

Object {
    Fruits: [
        Apple: { 
           {color: 'red'},
           {healthy: true}
        },
        Orange: {
            {color: 'orange'},
            {healthy: true}
        },
        Grape: {
            {color: 'purple'},
            {healthy: true}
        }
    ],
    Sweets: [
       Candy: {
          {color: 'pink'},
          {healthy: false}
       }
    ],
}

我正在尝试填充一个类似如下所示的HTML表(按类别分隔)：

______________________________________
| Name     |  Color    |   Healthy?  |
--------------------------------------
|Fruits                              | 
--------------------------------------
| Apple     |     Red  |      True   |
|----------------------|--------------
| Orange    | Orange   |      True   |
|----------------------|--------------
| Grape     | Purple   |     True    |
|----------------------|--------------
| Sweets                             |
|-------------------------------------
| Candy    |   Pink    |      False  |
--------------------------------------

我使用的是Ampersand.js/Angular。我正在从一个集合中筛选所需的数据，并尝试将它们放入另一个对象中，以便用来填充HTML表。

有没有可能做我想做的事？有没有比对象数组中的对象更容易设置数据的方法？

Answer 1

我不确定是否有可能在表中，但我们可以创建引导列，并添加一些自定义的css看起来像一个表。此外，您可以使用一个单独的对象数组，而不是拥有多个数组，这些对象具有"type“和"name”等附加属性。您当前的数据将如下所示。

$scope.data = [{ name:'Apple', color: 'red', healthy: true, type: 'Fruits'}, { name:'Orange', color: 'orange', healthy: true, type: 'Fruits'}, { name:'Grape', color: 'purple', healthy: true, type: 'Fruits'}, { name:'Candy', color: 'pink', healthy: false, type: 'Sweets'}];

在angularjs中，如果包含angular-filter，则可以基于属性对项目进行分组。记住，在angular中只有orderBy是开箱即用的。如果你需要使用groupBy，你应该在你的应用中包含'angular-filter'。您可以阅读有关angular-filter here的更多详细信息。

希望这篇jsfiddle能帮上忙。