AngularJS 填充表

Question

我需要使用以下对象创建一个表:

        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 但我没有得到我想要的结果。这是我想要我的 table 的方式。

+-------------------------------------------+
| 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。我启动了网络服务来获取真实数据。现在表格没有被数据填满。我打开开发工具来检查错误，我有 0 错误。我也查了 Network和 Responses并且 json 对象正在通过，所以我的网络服务没有问题。可能有什么问题？这是我的 $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 对象通过。我的 table 上只有 未定义 .如何在表中获取我的数据？

Answer 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>