Question

我遇到与db表显示有关的问题。

我的数据现在就是这种格式。

 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上显示

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

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

我能写逻辑直到这里。

<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}。我正在添加这个条件，否则它也可以显示如下所示的结果

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

在这里，年龄是错误的。所以我想过滤那些给Jack / Jim等值的东西。属性包含 - 年龄，性别，糖尿病。名字包含 - 杰克，吉姆，杰西 totalData包含第一个表的每个行数据

Answer 1

这是我提出的解决方案。大多数情况下，我想知道如何在ng-repeat中添加多个过滤器。我补充说。

<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>

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

使用angularjs从db动态添加列

1 个答案: