使用AngularJS在div元素中显示表格的行答案

【问题标题】：Displaying a table's row in a div element using AngularJS使用AngularJS在div元素中显示表格的行
【发布时间】：2015-06-02 18:45:24
【问题描述】：

我有一个包含很多行的数据库表，每行有 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>

【问题讨论】：

标签： javascript angularjs service view controller

【解决方案1】：

您可以将行响应设置为控制器范围，然后在视图中访问它。在视图中，您可以使用 angularJS ng-repeat 指令循环遍历表响应中的所有记录并呈现所需的数据。

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>

【讨论】：

【解决方案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>

您可以根据您的情况进行更改。

【讨论】：