Css 需要全部签名<；ul>；水平和<；李>；在它们里面垂直_Css_Angularjs_Html_Twitter Bootstrap

Css 需要全部签名<；ul>；水平和<；李>；在它们里面垂直

css angularjs html twitter-bootstrap

Css 需要全部签名<；ul>；水平和<；李>；在它们里面垂直,css,angularjs,html,twitter-bootstrap,Css,Angularjs,Html,Twitter Bootstrap,我有一个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",

我有一个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>



{{key}}

我试过其他方法

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

你到底有什么问题？在使用AngularJS或设置列表样式时？首先解析json并打印更改此ng repeat=“（键，值）在ctrl.Links中”@biking flip:我在设置此样式时遇到问题。@Arya220:您如何需要它们？垂直或水平

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