如何将对象放在彼此下方而不是彼此相邻的数组中？答案

【问题标题】：How can i put the objects in an array under each other instead of next to each other?如何将对象放在彼此下方而不是彼此相邻的数组中？
【发布时间】：2017-07-13 19:24:30
【问题描述】：

我只需要显示角色内容，以便数组在彼此下方而不是在一行中彼此相邻，或者我需要在 td 的那部分有一个滚动选项，以便它水平滚动

<tr ng-repeat="companyUser in companyUsers | filter:search | orderBy:sort">
    <td>
        <nobr>{{companyUser.user.firstName}}</nobr>
    </td>
    <td>
        <nobr>{{companyUser.user.lastName}}</nobr>
    </td>
    <td>
        <nobr>{{companyUser.user.username}}</nobr>
    </td>
    <td>
        <nobr>{{companyUser.user.role}}</nobr>
    </td> </tr>

我使用 Parse 通过 Parse 和 Parse 数据库加载数据，但主要是我希望角色 td 是水平可滚动的或在其他角色下。

【问题讨论】：

标签： html css angularjs parse-platform sass

【解决方案1】：

在<td> 标记中的人员角色上添加ng-repeat。

angular.module('app', [])
.controller('ctrl', function($scope) {
  $scope.data = [
    {
      firstname: "User",
      lastname: "Lastname",
      email: "email@email.com",
      role: ["Role1", "Role2", "Role3", "Role4"] 
    },
    {
      firstname: "User2",
      lastname: "Lastname2",
      email: "email2@email2.com",
      role: ["Role1", "Role2", "Role3", "Role4"] 
    }
  ]
})

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Roles</th>
      </tr>
      <tr ng-repeat="person in data">
        <td>{{person.firstname}}</td>
        <td>{{person.lastname}}</td>
        <td>{{person.email}}</td>
        <td><div ng-repeat="role in person.role">{{role}}</div></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：