Javascript 使用php mysql的Angularjs可折叠表
使用php向mysql编写一个查询，生成一个json rest返回，我正在使用angularjs处理该返回 我的数据显示为两列：父列、子列 父母|子女 父母1 |子女1 父母1 |子女2 父母2 |子女1 父母3 |子女1 父母3 |子女2 我正在尝试制作一个父母的html表格。展开行后，所有子项都将列在下面 我想每个家长只有一行 但是（使用上面的假数据）我当前的html表正在显示..基本上是重复的 父母1 |-儿童1 |-儿童2 父母1 |-儿童1 |-儿童2 我可以用angular做些什么，或者用一种方法修改json对象，以使期望的结果成为可能吗Javascript 使用php mysql的Angularjs可折叠表,javascript,php,mysql,angularjs,Javascript,Php,Mysql,Angularjs,使用php向mysql编写一个查询，生成一个json rest返回，我正在使用angularjs处理该返回 我的数据显示为两列：父列、子列 父母|子女 父母1 |子女1 父母1 |子女2 父母2 |子女1 父母3 |子女1 父母3 |子女2 我正在尝试制作一个父母的html表格。展开行后，所有子项都将列在下面 我想每个家长只有一行 但是（使用上面的假数据）我当前的html表正在显示..基本上是重复的 父母1 |-儿童1 |-儿童2 父母1 |-儿童1 |-儿童2 我可以用angular做些什么
-
+
{{parent.name}
{{parent.child}
Html
父1
孩子1
孩子2
家长2
孩子1
孩子2
控制器
var expandCollapseApp=angular.module（'expandCollapseApp'，['ngAnimate']）；
expandCollapseApp.controller（'expandCollapseCtrl'，函数（$scope）{
$scope.active=true；
$scope.active1=true；
});
CSS
.集装箱{
边缘顶部：100px；
边框：1px纯蓝色；
右边框：1px纯蓝色；
}
.折叠项目{
溢出：隐藏；
边框顶部：1px纯蓝色；
}
.坍塌导坑坍塌{
光标：指针；
填充：15px 20px；
位置：相对位置；
z指数：100000000；
颜色：黑色；
背景色：白色；
}
.expandcollapse项：类型的第一个{
边框顶部：0px；
}
.expandcollapse标题已塌陷p{
字体大小：16px；
字体大小：正常；
边际：0px；
}
.展开折叠标题展开{
光标：指针；
z指数：100000000；
填充：15px 20px；
位置：相对位置；
颜色：白色；
背景色：黑色；
边框：1px纯蓝色；
}
.expandcollapse标题expanded p{
字体大小：16px；
字体大小：粗体；
边际：0px；
}
.expandcollapse航向塌陷>跨度，
.expandcollapse标题expanded>span{
位置：绝对位置；
顶部：25px；
右：15px；
字体大小：20px；
线高：0px；
}
.展开折叠内容{
填充：20px；
}
/*
动画：*/
.slideDown.ng-hide{
身高：0；
过渡：高度0.35s；
溢出：隐藏；
位置：相对位置；
}
.滑下{
高度：141px；
过渡：高度0.35s；
溢出：隐藏；
位置：相对位置；
}
.slideDown.ng-hide-remove，
.slideDown.ng-hide-add{
/*记住，.hg隐藏类被添加到元素中
当添加活动类时，使其出现
隐藏。因此，将样式设置为display=block
使隐藏动画可见*/
显示：块！重要；
}
.slideDown.ng-hide-add{
动画名称：隐藏；
-webkit动画名称：隐藏；
动画持续时间：.5s；
-webkit动画持续时间：.5s；
动画计时功能：轻松自如；
-webkit动画计时功能：轻松；
}
.slideDown.ng-hide-remove{
动画名称：show；
-webkit动画名称：show；
动画持续时间：.5s；
-webkit动画持续时间：.5s；
动画计时功能：放松；
-webkit动画计时功能：轻松输出；
}
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;
}