挖掘数据并显示AngularJS中的数据

问题描述：

我正在使用AngularJS并尝试以表格格式显示数据。挖掘数据并显示AngularJS中的数据

这是我想要的格式排列：

$scope.MyList = [{ 
      id: "559e2bbc9a496034557d6d84", 
      text: "Data Sources", 
      topParentId: "559e2bbc9a496034557d6d84", 
      topParentText: "Data Sources" 
     }, { 
      id: "559e2bbc9a496034557d6d83", 
      text: "India", 
      topParentId: "559e2bbc9a496034557d6d83", 
      topParentText: "India" 
     }, { 
      id: "559e2bbc9a496034557d6d82", 
      text: "MH", 
      topParentId: "559e2bbc9a496034557d6d83", 
      topParentText: "India" 
     }];

结帐这个fiddle有关的实施细则：

目前的数据显示为

559e2bbc9a496034557d6d84 
    Data Sources 

559e2bbc9a496034557d6d83 
    India 
    MH 

Instead I want to show data in tabular format 

559e2bbc9a496034557d6d84 |  Data Sources 
559e2bbc9a496034557d6d83 |  India MH

到目前为止，我已经尝试此：

<table class="table table-bordered"> 
    <thead> 
     <tr> 
      <th>Topic</th> 
      <th>Tags</th> 
     </tr > 
    </thead> 
    <tbody> 
     <tr ng-repeat="tag in topic.myList | groupBy: ['topParentId']"> 
      <td ng-show="tag.group_by_CHANGED">{{tag.topParentText}}</td> 
      <td> 
       <ul> 
        <li>{{tag.text}}</li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table>

但我无法获得所需的输出。请帮忙

答

我编辑了你的JSFiddle并把你的表放进来看看发生了什么。它看起来像它几乎做你想要的。尽我所知，问题在于你在某些情况下完全隐藏了第一个<td>。相反，只需隐藏其中的文本。

这里是我的版本，你的jsfiddle的，我想工作，你所希望的方式：http://jsfiddle.net/4Dpzj/162/

当前如果父母有3-4个节点/标签，我们正在创建4行（在TD的帮助下）。我想每个parentID只有一行，这样第一列应该是组名，第二列是将所有相关标记放在同一行。 – SharpCoder

在这种情况下，你需要改变你的过滤器方法来合并那些应该在一行中的对象。 – kiswa

答

在那里我将改变应用

<div ng-app="myApp"> 
    <div ng-controller='TestGroupingCtlr'> 
     <h1>Multiple Grouping Parameters</h1> 

     <div ng-repeat="item in MyList | groupBy:['topParentId']"> 
     <div style="width:100%;overflow:hidden"> 
<h2 ng-show="item.group_by_CHANGED" style="float:left">{{item.topParentId}}</h2> 
      <ul style="float:left"> 
       <li style="float:left">{{item.text}}</li> 
      </ul></div> 

     </div> 
     <form role="form" ng-submit="AddItem()"> 
      <input type="text" data-ng-model="item.groupfield" placeholder="Group"> 
      <input type="text" data-ng-model="item.whatever" placeholder="Item"> 
      <input type="text" data-ng-model="item.deep.category" placeholder="Category"> 
      <br /> 
      <input class="btn" type="submit" value="Add Item"> 
     </form> 
    </div> 
</div>

捣鼓演示可以达致这件事，甚至用CSS也01HTML： http://jsfiddle.net/4Dpzj/163/

挖掘数据并显示AngularJS中的数据

相关推荐