我有一个像这样的json对象
$scope.Links =[{"LinkName":"Google","Link":"https://www.google.co.in","LinkDescription":"Group1"}
,{"LinkName":"angular","Link":"https://angularjs.org/\r\n","LinkDescription":"Group1"},
{"LinkName":"jsome","Link":"sdfsd","LinkDescription":"Group2"},
{"LinkName":"sdfsd","Link":"sdfsd","LinkDescription":"Group3"},
{"LinkName":"dummy","Link":"dummy","LinkDescription":"Group3"}]
我需要这样的输出。
Group1 Group2 Group3
------- ------- ------
angular jsome sdfsd
Google dummy
我正在使用角度js,bootstrap和html5
我尝试了什么。
<ul>
<li ng-repeat="(key, value) in ctrl.links | groupBy: 'LinkDescription'">
{{ key }}
<ul>
<li ng-repeat="player in value">
<a target="_blank" role="menuitem" tabindex="-1" href="{{link.Link}}"><font color="#e7e7e7">{{player.LinkName|capitalize}}</font></a>
</li>
</ul>
</li>
</ul>
答案 0 :(得分:0)
我已经尝试了其他方式
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script type="text/javascript" src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ListCtrl">
<div style="width: 30%" ng-repeat="(key, value) in links | groupBy: 'LinkDescription'">
{{ key }}
<div>
----------
<div style="width: 50%" ng-repeat="(key, val) in value | orderBy: link.LinkDescription">
<a target="_blank" role="menuitem" tabindex="-1" href="{{val.Link}}"><font color="#e7e7e7"></font>{{val.LinkName}}</a>
</div>
</div>
</div>
</div>
</body>
</html>
在控制器中
var app = angular.module('myApp', ['ui.bootstrap', 'angular.filter']);
app.controller('ListCtrl', function($scope, $filter) {
$scope.links =[
{"LinkName":"Google","Link":"https://www.google.co.in","LinkDescription":"Group1"},
{"LinkName":"angular","Link":"https://angularjs.org/\r\n","LinkDescription":"Group1"},
{"LinkName":"jsome","Link":"sdfsd","LinkDescription":"Group2"},
{"LinkName":"sdfsd","Link":"sdfsd","LinkDescription":"Group3"},
{"LinkName":"dummy","Link":"dummy","LinkDescription":"Group3"}]
});