[英]Displaying a table's row in a div element using AngularJS
I have a database table with many rows, each with 5 fields each. 我有一个包含许多行的数据库表,每行各有5个字段。 I then have a <div>
element that I'd like to display one row's fields in. What is the best way to retrieve a row from my table and have a div display the row's fields? 然后,我有一个<div>
元素,我想在其中显示一行的字段。从表中检索一行并让div显示该行的字段的最佳方法是什么?
Currently I have a service that retrieves all rows from a table, a controller that calls the aforementioned service, and within the controller I have each of the row's fields. 当前,我有一个从表中检索所有行的服务,一个调用上述服务的控制器,并且在控制器内,我具有行的每个字段。 Here's what I mean: 这就是我的意思:
// 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>
You can just set the row response to controller scope and then access it in the view. 您可以仅将行响应设置为控制器作用域,然后在视图中对其进行访问。 In the view you can use angularJS ng-repeat directive to loop through all the records from table response and render the required data. 在视图中,您可以使用angularJS ng-repeat指令遍历表响应中的所有记录并呈现所需的数据。
Js JS
myService.PHP.getTableRows(function(getTableRowsResponse){
// getTableRowsResponse contains all of my rows in the table in an array
$scope.tableResponse = getTableRowsResponse;
});
View 视图
<div class="widget" ng-repeat="row in tableResponse">
<!-- Render the UI however you want -->
Name: {{row.name}}
Age: {{row.age}}
...
...
</div>
The following is what I had implemented for my case 以下是我为案例实施的内容
<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>
You can make changes corresponding to your case. 您可以根据情况进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.