需要将 <ul> 水平对齐并在其中垂直对齐 <li>答案

【问题标题】：Need to allign <ul> horizontally and <li> inside them vertically需要将 <ul> 水平对齐并在其中垂直对齐 <li>
【发布时间】：2016-06-16 15:48:28
【问题描述】：

我有一个类似这样的 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

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

【问题讨论】：

您的问题到底是什么？使用 AngularJS 或设置列表样式？
解析json并打印到

先在ctrl.Links中改这个ng-repeat="(key, value)"

@biking-flip：我的样式有问题。

@Arya220：你怎么需要它们？垂直或水平

标签： css angularjs html twitter-bootstrap

【解决方案1】：

我尝试过其他方式

 <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"}]
});

【讨论】：