如何使用 zurb 表格和网格以表格形式显示以下 angular 控制器输出

Question

我是 angular JS 和 zurb 的新手，我有一个控制器显示位于 http://jsonplaceholder.typicode.com/users 的远程 json 数据，但我想显示控制器的响应以表格形式使用 zurb.When 用户点击一行，应弹出显示模式并显示特定用户的完整详细信息，包括：地址，phone 号码有人可以帮助我如何执行此代码下面是我使用过的 angular 控制器，我的控制器只显示数据，但我想使用 zurb 表和网格在表单表中显示。

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="usersController"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.id + ', ' + x.name + ', '+ x.username + ', '+ x.email}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
  $http.get(" http://jsonplaceholder.typicode.com/users")
  .success(function (data) {$scope.names = data;});
  });
</script>

</body>
</html>

Answer 1

据我从他们的网站上了解到，Zurb table 只是具有一些时尚的外观和感觉，您可以这样使用它：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th >User Name </th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in names">
      <td ng-bind="x.id"></td>
      <td ng-bind="x.name"></td>
      <td ng-bind="x.username"></td>
      <td ng-bind="x.email"></td>
    </tr>
  </tbody>
</table>

如何使用 zurb 表格和网格以表格形式显示以下 angular 控制器输出

How to display the below angular controller output in form of tables using zurb tables and grids

json

zurb-foundation

angularjs

zurb-reveal