javascript - 如何通过 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以使其看起来像表格。此外，您可以拥有一个具有“类型”和“名称”等附加属性的对象数组，而不是多个数组。您当前的数据将如下所示。

$scope.data = [{ name:'Apple', color: 'red',healthy: true, type: 'Fruits'},
{ name:'Orange', color: 'orange',healthy: true, type: 'Fruits'},
{ name:'葡萄', color: '紫色',healthy: true, type: '水果'},
{ name:'Candy', color: 'pink',healthy: false, type: 'Sweets'}];

在 AngularJS 中，如果包含 Angular-Filter，则可以根据属性对项目进行分组。请记住，只有 orderBy 可以在 Angular 中开箱即用。如果您需要使用 groupBy，您应该将 'angular-filter' 添加到您的应用中。您可以阅读有关 Angular 过滤器 here 的更多详细信息.

希望这个jsfiddle有帮助。