I am very new to angular JS and zurb,I have a controller which displays remote json data located in http://jsonplaceholder.typicode.com/users, but I want to display the response of the controller in form of tables using zurb.When a user clicks on a row, a reveal modal should pop up and show the specific user’s full details including: address, phone number can someone help me how to do this the code below is my angular controller which I have used, my controller just displays the data but I want to display in form tables using zurb tables and grids.
<!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>As I understand from their website, Zurb table is nothing but with some stylish look and feel, you can use it like this:
<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>