需要水平排列，垂直排列<ul> <li>

我有一个像这样的东西

  $scope.Links =[{"LinkName":"Google","Link":"https://www.google.co.in","LinkDescription":"Group1"}
    ,{"LinkName":"angular","Link":"https://angularjs.org/rn","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

我正在使用Angular 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>

我已经尝试了其他方式

 <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/rn","LinkDescription":"Group1"},
    {"LinkName":"jsome","Link":"sdfsd","LinkDescription":"Group2"},
    {"LinkName":"sdfsd","Link":"sdfsd","LinkDescription":"Group3"},
    {"LinkName":"dummy","Link":"dummy","LinkDescription":"Group3"}]
});

相关内容

最新更新

热门标签：