Currently, I have a table displaying a list of users with their corresponding roles. However, the roles column is sometimes wrapping before reaching the end of the line.
The user list data looks like this:
$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"
}];
When displayed in the table:
<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">, </span>{{rol}}</span>
</td>
</tr>
The issue arises when the Roles column values do not display in a single line as desired. The goal is to wrap the content only after each span element.
To better illustrate the problem, you can view an example plunker here.
In the provided example, notice how the Role column value for Task Manager in the second row appears on a separate line.