AngularJS填充table

Question

我需要使用以下对象创建一个 table：

        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 构建一个 table；使用 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 对象来模拟 json 我将从 Web 服务打赌。在我得到这里的帮助后，我能够完成我的 html。我启动了 Web 服务以获取真实数据。现在 table 没有填充数据。我打开开发工具来检查错误，我有 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 中得到的只是 undefined。如何在 table 中获取我的数据？

Answer 1

试试这个：-

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

Answer 2

要构造此 table，我们需要对 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>

Answer 3

这是我自己问题的更新。

经过几天的研究，我调整了 $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，我以 table 的方式获得了数据。感谢我的朋友 Peter，他在 Web 服务方面提供了帮助。

AngularJS填充table

AngularJS filling table

angularjs

ng-repeat

angularjs-ng-repeat

2016 年 9 月 1 日更新

这是我自己问题的更新。