Question

在Angular中，我试图创建一个具有可折叠明细行的表。我有一个样例，其中包含用于主控细节的一排行面板，如果是主控细节，则包含可折叠的表格。我试图修改代码以将表用于主数据，并将表用于详细数据。但是，我无法使其正常打开或折叠。

我有一个非常简单的插件文件来演示我所拥有的： 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>

Answer 1

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

更新了plunker

Angular中的Master / Detail网格

1 个答案: