我需要创建一个包含以下对象的表：
this.customer =
[{
cid:"1",productid:"1",src:"walmart",total:"1"
},{
cid:"1",src:"target",total:"2"
},src:"tjmax",productid:"2",total:"4"
},total:"0"
},{
cid:"2",total:"3"
},total:"6"
},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实现这个目的吗？任何利用其他指令的想法？
2016年9月1日更新
构建这个应用程序我创建一个js对象来模拟我将从Web服务下注的json.在我得到帮助后,我能够完成我的HTML.我启动了Web服务以获取真实数据.现在表格没有填满数据.我打开开发工具来检查错误,我有0错误.我还检查了网络和响应,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}}<预>我可以看到json对象通过.我在桌子上的所有内容都是未定义的.如何在表格中获取数据？
解决方法
要构建此表,我们需要对客户数组进行分组和过滤.
为方便完成任务,您可以使用angular-filter.
例如jsfiddle.
angular.module("ExampleApp",['angular.filter'])
.controller("ExampleController",function($scope) {
$scope.customer = [{
cid: "1",productid: "1",src: "walmart",total: "1"
},{
cid: "1",src: "target",total: "2"
},src: "tjmax",productid: "2",total: "4"
},total: "0"
},{
cid: "2",total: "3"
},total: "6"
},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>
