使用AngularJS在div元素中顯示表的行

Question

我有一個包含許多行的數據庫表，每行各有5個字段。 然后，我有一個<div>元素，我想在其中顯示一行的字段。從表中檢索一行並讓div顯示該行的字段的最佳方法是什么？

當前，我有一個從表中檢索所有行的服務，一個調用上述服務的控制器，並且在控制器內，我具有行的每個字段。 這就是我的意思：

// 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

您可以僅將行響應設置為控制器作用域，然后在視圖中對其進行訪問。 在視圖中，您可以使用angularJS ng-repeat指令遍歷表響應中的所有記錄並呈現所需的數據。

JS

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

視圖

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

Answer 2

以下是我為案例實施的內容

     <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>

您可以根據情況進行更改。