Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi cần tạo một bảng với đối tượng sau:

        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"
    }];

Tôi cần tạo một bảng sử dụng AngulaJS và Bootstrap; với bootstrap tôi không gặp vấn đề gì. Tôi đang cố gắng sử dụng ng-repeat nhưng tôi không nhận được kết quả như mong muốn. Đây là cách tôi muốn bàn của tôi.

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

Tôi có thể đạt được điều này với ng-repeat không? Bất kỳ ý tưởng sử dụng các chỉ thị khác?

Cập nhật 1 SEP 2016

Xây dựng ứng dụng này Tôi tạo một đối tượng js để mô phỏng json mà tôi sẽ đặt cược từ một dịch vụ web. Sau khi tôi nhận được trợ giúp ở đây, tôi đã có thể hoàn thành html của mình. Tôi đã kích hoạt dịch vụ web để lấy dữ liệu thực. Bây giờ bảng không được lấp đầy dữ liệu. Tôi đã mở các công cụ dành cho nhà phát triển để kiểm tra lỗi và tôi có 0 lỗi. Tôi cũng đã kiểm tra NetworkResponsesđối tượng json đang chạy qua, vì vậy tôi không gặp vấn đề gì với dịch vụ web của mình. Điều gì có thể sai? Đây là $httpmã của tôi .

(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(":(");
    });
});

})();

Tôi cũng <pre>{{customer | json}}<?pre>có thể nhìn thấy đối tượng json đi qua. Tất cả những gì tôi nhận được trong bảng của mình là không xác định . Làm cách nào để lấy dữ liệu của tôi trong bảng?

4 hữu ích 5 bình luận 668 xem chia sẻ
1

Để xây dựng bảng này, chúng ta cần nhóm và lọc customermảng.

Để tạo điều kiện thuận lợi cho tác vụ, bạn có thể sử dụng bộ lọc góc .

Ví dụ trên 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>
Mở rộng đoạn mã

1 hữu ích 5 bình luận chia sẻ
0

Thử cái này :-

<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>
0 hữu ích 1 bình luận chia sẻ
0

Đây là bản cập nhật câu hỏi của riêng tôi.

Sau khi thực hiện một số nghiên cứu trong vài ngày, tôi đã chỉnh sửa $httpmã để giải quyết vấn đề của mình. Mã như sau:

$http({
        method: 'GET',
        url: 'path'
    }).then(function successCallback(response) {
        $scope.customer = response.data;
        console.log(response.data);
    }, function errorCallback(response) {
        console.log(":(");
    });

Nhờ @Stepan Kasyanenko, tôi đã có được dữ liệu trong bảng theo cách được yêu cầu. Cảm ơn Peter, một người bạn của tôi, đã giúp đỡ với dịch vụ web.

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angularjs angularjs-ng-repeat ng-repeat , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading