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

Posted 2023-02-26

【中文标题】使用AngularJS在div元素中显示表格的行

【英文标题】：Displaying a table's row in a div element using AngularJS

【发布时间】：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>

【参考方案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>

【参考方案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>

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