带有php mysql的Angularjs可折叠表答案

【问题标题】：Angularjs collapsable table with php mysql带有php mysql的Angularjs可折叠表
【发布时间】：2017-07-07 17:14:58
【问题描述】：

使用 php 向 mysql 编写一个查询，该查询会产生一个我正在使用 angularjs 操作的 json 休息返回。

我的数据显示为 2 列：父、子。

我正在尝试制作父母的 html 表格。展开该行后，所有子代都会列在下面。

我希望每个父母只使用 1 行。

但是（使用上面的假数据）我当前的 html 表正在显示..基本上是重复的父母家长1 |-儿童 1 |-孩子2 家长1 |-儿童 1 |-孩子2 ...

我可以用 Angular 做些什么，或者可以通过某种方式修改我的 json 对象以使期望的结果成为可能？

<tr ng-repeat-start="parent in parents | filter:search_query track by $index">
            <td>
              <button class="btn btn-warning" ng-if="parent.expanded" ng-click="parent.expanded = false">-</button>
              <button class="btn btn-info" ng-if="!parent.expanded" ng-click="parent.expanded = true">+</button>
            </td>
            <td>{{parent.name}}</td>
     
          </tr>
          <tr ng-if="parent.expanded" ng-repeat-end="">
            <td ng-repeat="parent in parent" colspan="3">{{parent.child}}</td>
          </tr>

</tr>

【问题讨论】：

标签： javascript php mysql angularjs

【解决方案1】：

    Html 

   <!DOCTYPE html>

<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="style.css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="expandCollapseApp">

  <div ng-controller="expandCollapseCtrl">
    <div class="container">

      <div class="expandcollapse-item">
        <div ng-click="active = !active" ng-class="{'expandcollapse-heading-collapsed': active, 'expandcollapse-heading-expanded': !active}">
          <p>Parent 1</p></p>
        </div>

        <div class="slideDown" ng-hide="active">
          <div class="expand-collapse-content">
            <table>
              <tr>
                <td>
                  child1
                </td>
                <td>
                  child2
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <div class="expandcollapse-item">
        <div ng-click="active1 = !active1" ng-class="{'expandcollapse-heading-collapsed': active1, 'expandcollapse-heading-expanded': !active1}">
          <p>Parent 2</p>
        </div>

        <div class="slideDown" ng-hide="active1">
          <div class="expand-collapse-content">
           <table>
              <tr>
                <td>
                  child1
                </td>
                <td>
                  child2
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>


</body>

</html>


    Controller

        var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);

        expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
                $scope.active = true;
                $scope.active1 = true;

        });

    CSS
        .container {
          margin-top:100px;
          border: 1px solid blue;
          border-right: 1px solid blue;
        }

        .expandcollapse-item {
          overflow: hidden;
          border-top:1px solid blue;
        }

        .expandcollapse-heading-collapsed {
          cursor: pointer;
          padding: 15px 20px;
          position: relative;
          z-index: 100000000;
          color: black; 
          background-color: white;

        }

        .expandcollapse-item:first-of-type {
          border-top:0px;
        }


        .expandcollapse-heading-collapsed p{
          font-size: 16px;
          font-weight: normal;
          margin:0px;
        }



        .expandcollapse-heading-expanded {
          cursor: pointer;
          z-index: 100000000;
          padding: 15px 20px;
          position: relative;
          color: white; 
          background-color: black;
          border: 1px solid blue;
        }

        .expandcollapse-heading-expanded p{
          font-size: 16px;
          font-weight: bold;
          margin:0px;
        }

        .expandcollapse-heading-collapsed > span,
        .expandcollapse-heading-expanded > span {
          position:absolute;
          top: 25px;
          right: 15px;
          font-size: 20px;
          line-height: 0px;
        }

        .expand-collapse-content {
          padding: 20px;
        }


        /*
        animation:*/

        .slideDown.ng-hide {
          height:0;
          transition:height 0.35s ease;
          overflow:hidden;
          position:relative;
        }

        .slideDown {
          height:141px;
          transition:height 0.35s ease;
          overflow:hidden;
          position:relative;
        }

        .slideDown.ng-hide-remove,
        .slideDown.ng-hide-add {
          /* remember, the .hg-hide class is added to element
          when the active class is added causing it to appear
          as hidden. Therefore set the styling to display=block
          so that the hide animation is visible */
          display:block!important;
        }


        .slideDown.ng-hide-add {
          animation-name: hide;
          -webkit-animation-name: hide;  

          animation-duration: .5s; 
          -webkit-animation-duration: .5s;

          animation-timing-function: ease-in;  
          -webkit-animation-timing-function: ease-in;  
        }



        .slideDown.ng-hide-remove {
          animation-name: show;
          -webkit-animation-name: show;  

          animation-duration: .5s; 
          -webkit-animation-duration: .5s;

          animation-timing-function: ease-out;  
          -webkit-animation-timing-function: ease-out;  
        }

Demo

【讨论】：