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

Question

我有一个数据库 table 有很多行，每行有 5 个字段。然后我有一个 <div> 元素，我想在其中显示一行的字段。什么是从我的 table 中检索一行并让 div 显示该行字段的最佳方法？

目前我有一个服务可以从 table 中检索所有行，一个调用上述服务的控制器，在控制器中我有每一行的字段。这就是我的意思：

// 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 指令循环遍历 table 响应中的所有记录并呈现所需数据。

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>

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

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

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

javascript

service

controller

view

angularjs