Сетка Master / Detail в угловых - PullRequest
Новая
       8

Сетка Master / Detail в угловых

0 голосов
/ 08 декабря 2018

В Angular я пытаюсь создать таблицу с разборными строками.У меня был пример этой работы со стеком панелей строк для основных деталей, которые содержали складные таблицы, если это детали для главного устройства.Я пытаюсь изменить код, чтобы использовать таблицы для основных данных, а также таблицы для подробных данных.Тем не менее, я не могу заставить его открыться или свернуть должным образом.

У меня есть очень простой файл plunker, чтобы продемонстрировать, что у меня есть: http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info

Я считаю, что это проблема с HTML, я пытаюсь проверить с помощью ng-repeat в разных местах,например, в div или tr, но я не слишком знаком с angular.Кто-нибудь может указать, что я делаю неправильно?Я пытаюсь следующее: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>

<body>


  <div data-ng-controller="homeController">
    <div class="container">
      <table class="table table-striped">
        <tr class="row">
          <th>ID</th>
          <th>Name</th>

        </tr>
        <tbody ng-repeat="product in products">
          <tr>
            <td>
              <span class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-target="#view_{{product.productid}}" data-toggle="collapse" aria-expanded="false" data-ng-if="product.items!=null"></span>
            </td>
            <td> {{product.productid}}</td>
            <td> {{product.productname}}</td>

          </tr>

          <div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
            <div class="col-sm-offset-1">
              <table class="table-condensed responsive-table">
                <tr class="row">
                  <th>#ID</th>
                  <th>Item</th>
                  <th>Amount</th>
                  <th>Qty</th>
                </tr>
                <tr class="row" ng-repeat="item in product.items">
                  <td data-ng-bind="item.prodDetailId"></td>
                  <td data-ng-bind="item.prodDetailDesc"></td>
                  <td data-ng-bind="item.amount | currency"></td>
                  <td data-ng-bind="item.qty"></td>
                </tr>
              </table>
            </div>

          </div>
        </tbody>
      </table>
    </div>
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
  <script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
  <script>
    angular.module('app', [])
      .controller('homeController', ['$scope', function($scope) {

        $scope.collapse = function(event) {
          $(event.target).toggleClass("glyphicon-chevron-down");
        };

        $scope.products = [{
          "productid": 1001456,
          "productname": "Spring Season Gift",
          "amount": 250,
          "orderDate": "2015-02-15T00:00:00Z",
          "availablity": 1,
          "items": [{
            "prodDetailId": 17890,
            "prodDetailDesc": "PS4",
            "amount": "150",
            "qty": 1
          }, {
            "prodDetailId": 17891,
            "prodDetailDesc": "Heart Shaped Ring",
            "amount": "100",
            "qty": 1
          }, ]
        }, {
          "productid": 1001457,
          "productname": "Christmas Season Gift",
          "amount": 349,
          "orderDate": "2015-04-15T00:00:00Z",
          "availablity": 1,
          "items": [{
            "prodDetailId": 17900,
            "prodDetailDesc": "Chocolate Giftbox",
            "amount": "150",
            "qty": 1
          }, {
            "prodDetailId": 17901,
            "prodDetailDesc": "Xbox 360",
            "amount": "199",
            "qty": 1

          }, ]
        }, {
          "productid": 1001458,
          "productname": "Birthday Gift",
          "availablity": "N/A",
          "amount": 200
        }];
      }]);
  </script>

</body>

</html>

1 Ответ

0 голосов
/ 08 декабря 2018

Ваша структура HTML была неправильной.Вы не можете поместить div в таблицу напрямую ..

Вам нужно добавить tr, затем td, а затем в него добавить div.

Я исправил вашу HTML-структурупожалуйста, проверьте. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>

<body>


  <div data-ng-controller="homeController">
    <div class="container">
      <table class="table table-striped">
        <tr class="row">
          <th>ID</th>
          <th>Name</th>

        </tr>
        <tbody ng-repeat="product in products">
          <tr>
            <td>
              <a class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-ng-if="product.items!=null" role="button" data-toggle="collapse" href="#view_{{product.productid}}" aria-expanded="false">
              </a>
            </td>
            <td> {{product.productid}}</td>
            <td> {{product.productname}}</td>

          </tr>

          <tr class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
            <td colspan="3">
              <div class="col-sm-offset-1">
                <table class="table-condensed responsive-table">
                  <tr class="row">
                    <th>#ID</th>
                    <th>Item</th>
                    <th>Amount</th>
                    <th>Qty</th>
                  </tr>
                  <tr class="row" ng-repeat="item in product.items">
                    <td data-ng-bind="item.prodDetailId"></td>
                    <td data-ng-bind="item.prodDetailDesc"></td>
                    <td data-ng-bind="item.amount | currency"></td>
                    <td data-ng-bind="item.qty"></td>
                  </tr>
                </table>
              </div>
            </td>

          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
  <script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
  <script>
    angular.module('app', [])
      .controller('homeController', ['$scope', function($scope) {

        $scope.collapse = function(event) {
          $(event.target).toggleClass("glyphicon-chevron-down");
        };

        $scope.products = [{
          "productid": 1001456,
          "productname": "Spring Season Gift",
          "amount": 250,
          "orderDate": "2015-02-15T00:00:00Z",
          "availablity": 1,
          "items": [{
            "prodDetailId": 17890,
            "prodDetailDesc": "PS4",
            "amount": "150",
            "qty": 1
          }, {
            "prodDetailId": 17891,
            "prodDetailDesc": "Heart Shaped Ring",
            "amount": "100",
            "qty": 1
          }, ]
        }, {
          "productid": 1001457,
          "productname": "Christmas Season Gift",
          "amount": 349,
          "orderDate": "2015-04-15T00:00:00Z",
          "availablity": 1,
          "items": [{
            "prodDetailId": 17900,
            "prodDetailDesc": "Chocolate Giftbox",
            "amount": "150",
            "qty": 1
          }, {
            "prodDetailId": 17901,
            "prodDetailDesc": "Xbox 360",
            "amount": "199",
            "qty": 1

          }, ]
        }, {
          "productid": 1001458,
          "productname": "Birthday Gift",
          "availablity": "N/A",
          "amount": 200
        }];
      }]);
  </script>

</body>

</html>

Обновлено Плункер

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...