Displaying a table's row in a div element using AngularJS

Question

I have a database table with many rows, each with 5 fields each. I then have a <div> element that I'd like to display one row's fields in. What is the best way to retrieve a row from my table and have a div display the row's fields?

Currently I have a service that retrieves all rows from a table, a controller that calls the aforementioned service, and within the controller I have each of the row's fields. Here's what I mean:

// service
...
      getTableRows: function(callback) {
        $http.post('../php/getTableRows.php')
          .success(function(data, status, headers, config) {
            callback(data);
          })
          .error(function(errorData) {
            console.log("error: " + errorData);
          });
      }

// controller
...
myService.PHP.getTableRows(function(getTableRowsResponse){
    // getTableRowsResponse contains all of my rows in the table in an array
    //getTableRowsResponse[0].name;
    //getTableRowsResponse[0].ID;
    //getTableRowsResponse[0].age;
    //getTableRowsResponse[0].department;
    //getTableRwosResponse[0].imageurl;
});

// view
...
  <div class="widget">
    //how do I access the fields here?
  </div>

Answer 1

You can just set the row response to controller scope and then access it in the view. In the view you can use angularJS ng-repeat directive to loop through all the records from table response and render the required data.

Js

myService.PHP.getTableRows(function(getTableRowsResponse){
    // getTableRowsResponse contains all of my rows in the table in an array
    $scope.tableResponse = getTableRowsResponse;
});

View

  <div class="widget" ng-repeat="row in tableResponse">
       <!-- Render the UI however you want -->
       Name: {{row.name}}
       Age: {{row.age}}
       ...
       ...
  </div>

Answer 2

The following is what I had implemented for my case

     <div>
     <table>
        <thead>
            <tr>
                <th>Total Price</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="d in data">
                <td>{{d.price}}</td>
                <td>{{d.status}}</td>
            </tr>
        </tbody>
    </table>
    </div>

You can make changes corresponding to your case.