使用angularjs从数据库动态添加列 [英] Dynamic addition of columns from db using angularjs

问题描述

我有一个与db表显示有关的问题。

I have a problem related to the display of db table.

我的数据现在以这种格式显示。

My data is right now in this format.

 Property     Value      Name  

 Age      |   20    |   Jack 
 Sex      |   Male  |   Jack 
 Diabetic |   Yes   |   Jack 
 Age      |   22    |   Jim 
 Sex      |   Male  |   Jim 
 Diabetic |   No    |   Jim 
 Age      |   25    |   Jessie 
 Sex      |   Female|   Jessie 
 Diabetic |   No    |   Jessie 

我想使用Angularjs在UI上以这种格式显示此内容

I want to display this on the UI using Angularjs in this format

  Name      |    Jack   |   Jim   |  Jessie
  Age       |     20    |    22   |   25
  Sex       |    Male   |   Male  |  Female
 Diabetic   |     Yes   |    No   |   No

第一个表中的名称将来可以在数据库中增加。因此，对于新名称，将动态添加新列。

The names in the 1st table can be increased in the future in the db. So for a new name, new column will be added dynamically.

我可以在此处编写逻辑。

I am able to write logic till here.

<div class="col-md-12 table-responsive">
                <table class="table table-bordered table-striped table-condensed" style="width:50%">
                    <thead>
                        <tr class="bg-info">
                            <th >Name</th>
                            <th ng-repeat='header in names'>{{header}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat='p in properties'>
                            <td>{{p}}</td>
                            <td ng-repeat='item in totalData | filter : {property : p}: true'>{{item.value}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

现在，我可以看到所需格式的值。但是问题是我需要再设置一个过滤条件，即{item.name == header}。我添加此条件是因为否则它还会显示如下结果

Now I am able to see values in the desired format. But the issue is I need to have one more filter condition i.e. {item.name == header}. I am adding this condition because otherwise it can also display result like below

  Name      |    Jack   |   Jim   |  Jessie
  Age       |     22    |    25   |   20
  Sex       |    Male   |   Male  |  Female
 Diabetic   |     Yes   |    No   |   No

在这里，年龄放错了地方。因此，我想过滤出杰克/吉姆等人的值。
属性包含-年龄，性别，糖尿病。
名称包含-杰克，吉姆，杰西
totalData包含第一个表的每一行数据

Here, ages are misplaced. So I want to filter that give value for Jack/Jim etc. properties contain - Age, sex, diabetic. names contain - Jack, Jim, Jessie totalData contains every row data of the 1st table

推荐答案

这是我想出的解决方案。通常，我想知道如何在ng-repeat中添加多个过滤器。我已经添加了。

This is the solution that I have come up with. Mostly I wanted to know how add multiple filters in ng-repeat. I have added that.

<div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-striped table-condensed" style="width:50%">
                        <thead>
                            <tr class="bg-info">
                                <th >Name</th>
                                <th ng-repeat='header in names'>{{header}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat='p in properties'>
                                <td>{{p}}</td>
                                <td ng-repeat='item in totalData | filter : {property : p}: true | filter : {name : header} : true''>{{item.value}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

如果有人有更好的解决方案，我将很乐意实施。

If anyone has a better solution, I will be happy to implement it.

这篇关于使用angularjs从数据库动态添加列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！