[英]Displaying a table's row in a div element using AngularJS
我有一个包含许多行的数据库表,每行各有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>
您可以仅将行响应设置为控制器作用域,然后在视图中对其进行访问。 在视图中,您可以使用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>
以下是我为案例实施的内容
<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>
您可以根据情况进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.