Question

我有一个用户列表。我在一张桌子上显示。现在，我在角色列中有每个用户的角色列表。但是在某个地方它甚至在线路结束之前就被包裹了

我的用户列表是

$scope.userList = [{
    "id": 1,
    "name":"ABC",
    roles:["Task Manager","Monitoring" ,"Client Admin","User Admin","Employees","Manager","Production","planner"]
  }, {
   "id": 1,
    "name": "ABC",
    roles:["Task Manager","Monitoring","Planner","Employees","Production","Analysis","Incident"]
  }, {
   "id": 1,
    "name": "ABC"
  }, {
    "id": 1,
    "name":" ABC"
  }];

我正在显示它，

<tr ng-repeat="user in userList" >
                                    <td >
                                        <span id="userId{{$index + 1}}" ng-bind="user.id"></span>
                                    </td>
                                    <td >
                                        <span id="userFirstName{{$index + 1}}" ng-bind="user.name"></span>
                                    </td>

                                    <td ><span  ng-repeat="rol in user.roles track by $index"><span ng-if="$index > 0">,&nbsp;</span>{{rol}}</span>
                    </td>
                  </tr>

“角色”列值未显示在一行中。我需要的是在跨度结束时换行。

这是一个问题的示例plunker http://plnkr.co/edit/EUZokOfBWutp92MGFGsm?p=preview

您可以在第二行角色列中看到，任务管理器将显示在单独的行中。

Answer 1

为“td span”添加一些风格：

td span {
white-space: nowrap;
display: inline-block;
}

并添加：

table {
width:100%;
}

Answer 2

将此代码用于index.html

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="hz">
  <div ng-controller="ceilometerCtrl">
    <div id="ceilometer-stats">
         <table border=1 class="table table-striped table-condensed table-hover table-bordered main-table docTable" style="table-layout:fixed">                                
                                <thead>
                                    <tr>
                                        <th style="width: 5%;">User ID</th>
                                        <th style="width: 10%;">Username</th>
                                        <th style="width: 50%;">Roles</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="user in userList" >
                                        <td >
                                            <span id="userId{{$index + 1}}" ng-bind="user.id"></span>
                                        </td>
                                        <td >
                                            <span id="userFirstName{{$index + 1}}" ng-bind="user.name"></span>
                                        </td>

                                        <td >
<!--                                           <span>{{user.roles.toString()}}</span>
 -->                                            <span  ng-repeat="rol in user.roles track by $index"><span ng-if="$index > 0"></span> {{rol}},</span>
                                            </td>
                                </tr>
                                </tbody>
                            </table>
    </div>

  </div>

字符串被包裹在span中

2 个答案: