2

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>
Yaswanth Kumar
  • 459
  • 1
  • 4
  • 10
  • What's the problem with your code? – Anid Monsur Sep 03 '15 at 19:38
  • I dont have any problem with my code but all I want is to display the response using zurb table which Iam not doing! I want help to display using zurb tables and grids, when a user clicks on a row, a reveal modal should pop up and show the specific user’s full details including: address, phonenumber – Yaswanth Kumar Sep 03 '15 at 19:51
  • Ok but what is preventing you from doing that? Is there a specific part that you don't understand? We're here to help answer questions, not write code for you. – Anid Monsur Sep 03 '15 at 19:57
  • Am not really looking for you to write code for me but I want to know see some example how to put the data into zurb tables. – Yaswanth Kumar Sep 03 '15 at 20:17

1 Answers1

0

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>
Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
  • Thank you very much I thought we need to declare something in the script to make it work. This solves my problems. – Yaswanth Kumar Sep 03 '15 at 20:55
  • Can you give me example of how zurb reveal modal will work ? like when select a row it should show other details like address and phone number ? – Yaswanth Kumar Sep 04 '15 at 22:15
  • Learn UI-Router and use bootstrap, forgot about zurb, rest depends on your requirement, I don't know Zurb, and don't want to learn it, there nothing new which I cannot do with normal angular and bootstrap, sorry – Ali Adravi Sep 06 '15 at 15:07