我需要创建一个包含以下对象的表：
this.customer =
[{
cid:"1",
productid:"1",
src:"walmart",
total:"1"
},
{
cid:"1",
productid:"1",
src:"target",
total:"2"
},
{
cid:"1",
productid:"1",
src:"tjmax",
total:"2"
},
{
cid:"1",
productid:"2",
src:"walmart",
total:"1"
},
{
cid:"1",
productid:"2",
src:"target",
total:"4"
},
{
cid:"1",
productid:"2",
src:"tjmax",
total:"0"
},
{
cid:"2",
productid:"1",
src:"walmart",
total:"0"
},
{
cid:"2",
productid:"1",
src:"target",
total:"3"
},
{
cid:"2",
productid:"1",
src:"tjmax",
total:"6"
},
{
cid:"2",
productid:"2",
src:"walmart",
total:"4"
},
{
cid:"2",
productid:"2",
src:"target",
total:"6"
},
{
cid:"2",
productid:"2",
src:"tjmax",
total:"8"
}];
我需要使用AngulaJS和Bootstrap构建一个表;用bootstrap我没有任何问题。我正在尝试使用ng-repeat但是我没有得到我想要的结果。这是我想要我的桌子的方式。
+-------------------------------------------+
| cid | productId1 | productId2 |
+-----+------------------+------------------+
| 1 | wal:1,tar:2,tj:2 | wal:1,tar:4,tj:0 |
+-------------------------------------------+
| 2 | wal:0,tar:3,tj:6 | wal:4,tar:6,tj:8 |
+-------------------------------------------+
我可以用ng-repeat实现吗？任何利用其他指令的想法？
构建这个应用程序我创建了一个js对象来模拟我将从Web服务下注的json。在我得到帮助后，我能够完成我的HTML。我启动了Web服务以获取真实数据。现在表格没有填满数据。我打开开发工具来检查错误，我有0错误。我还检查了Network和Responses并且json对象正在通过，所以我的Web服务没有问题。可能有什么问题？这是我的$http代码。
(function () {
'use strict';
var app = angular.module('myApp', ['angular.filter']);
// Declare app level module which depends on views, and components
app.controller('CustomerTable', function ($scope, $http) {
// GET request example:
$http({
method: 'GET',
url: '../_includes/web_service_person.php'
}).then(function successCallback(data) {
$scope.customer = data;
}, function errorCallback(data) {
console.log(":(");
});
});
})();
我也<pre>{{customer | json}}<?pre>我可以看到json对象通过。我在桌子上的所有内容都是未定义。如何在表格中获取数据？
答案 0 :(得分：1)
要构建此表，我们需要对customer数组进行分组和过滤。
为方便完成任务，您可以使用angular-filter。
jsfiddle上的示例。
angular.module("ExampleApp", ['angular.filter'])
.controller("ExampleController", function($scope) {
$scope.customer = [{
cid: "1",
productid: "1",
src: "walmart",
total: "1"
}, {
cid: "1",
productid: "1",
src: "target",
total: "2"
}, {
cid: "1",
productid: "1",
src: "tjmax",
total: "2"
}, {
cid: "1",
productid: "2",
src: "walmart",
total: "1"
}, {
cid: "1",
productid: "2",
src: "target",
total: "4"
}, {
cid: "1",
productid: "2",
src: "tjmax",
total: "0"
}, {
cid: "2",
productid: "1",
src: "walmart",
total: "0"
}, {
cid: "2",
productid: "1",
src: "target",
total: "3"
}, {
cid: "2",
productid: "1",
src: "tjmax",
total: "6"
}, {
cid: "2",
productid: "2",
src: "walmart",
total: "4"
}, {
cid: "2",
productid: "2",
src: "target",
total: "6"
}, {
cid: "2",
productid: "2",
src: "tjmax",
total: "8"
}];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<table>
<tr>
<th>cid</th>
<th ng-repeat="(product, value) in customer|groupBy:'productid'">productid{{product}}</th>
</tr>
<tr ng-repeat="(cid, value) in customer|groupBy:'cid'">
<td>{{cid}}</td>
<td ng-repeat="(product, value) in customer|groupBy:'productid'">
<span ng-repeat="item in value|filterBy:['cid']:cid">
{{item.src}}:{{item.total}},
</span>
</td>
</tr>
</table>
</div>
答案 1 :(得分：0)
试试这个： -
<table>
<thead>
<th> cid </th>
<th> productId1 </th>
<th> productId2 </th>
</thead>
<tbody>
<tr ng-repeat="customer">
<td>{{customer.cid }}</td>
<td>{{customer.productId1 }}</td>
<td>{{customer.productId2 }}</td>
</tr>
</tbody>
</table>
答案 2 :(得分：0)
经过几天的研究后，我调整了$http代码来解决我的问题。代码如下：
$http({
method: 'GET',
url: 'path'
}).then(function successCallback(response) {
$scope.customer = response.data;
console.log(response.data);
}, function errorCallback(response) {
console.log(":(");
});
感谢@Stepan Kasyanenko，我按照要求的方式获得了表格中的数据。感谢我的朋友彼得，他帮助了网络服务。