Angularjs可摺疊表與PHP的MySQL

使用PHP來編寫一個查詢生成一個JSON休息的MySQL返回，我正在與angularjs操縱。Angularjs可摺疊表與PHP的MySQL

我的數據顯示爲2列：父，子。

我正在嘗試做一個家長的HTML表。擴大行後，所有的孩子將被列在下面。

我想每個父母只有1行。

然而（使用假數據從上方）我的當前HTML表displaying..essentially重複父母 Parent1 | - 兒童1 | - 兒童2 Parent1 | - 兒童1 | - 兒童2 。 ..

有沒有什麼我可以做的角度，或者可能的方式來修改我的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>

來源

2017-07-07 dallas

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

來源

2017-07-08 05:57:27

Angularjs可摺疊表與PHP的MySQL

回答

相關問題