【发布时间】：2015-08-24 11:05:54
【问题描述】：
我在一个表格中创建了一个表格，但我只想像手风琴一样在点击时显示第二个表格。我尝试实现在这里找到的代码：http://jsfiddle.net/Pixic/6Texj/，但无法复制结果。有人可以帮忙吗？
这里是html：
<body ng-controller="basicCtrl">
<h1 style="text-align: center">Michael Z Wang</h1>
<table st-table="jobCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="company" st-skip-natural="true">Company</th>
<th st-sort="location" st-skip-natural="true">Location</th>
<th st-sort="postion" st-skip-natural="true">Position Held</th>
<th st-sort="startDate" st-sort-default="reverse" st-skip-natural="true">Start Date</th>
<th st-sort="endDate" st-skip-natural="true">End Date</th>
</tr>
</thead>
<tbody ng-repeat="job in jobCollection">
<tr id="jobDetails" class="clickableRow" ng-click="openDetail($index)">
<td>{{job.company}}</td>
<td>{{job.location}}</td>
<td>{{job.position}}</td>
<td>{{job.startDate | date : 'MM/yyyy'}}</td>
<td>{{job.stopDate | date : 'MM/yyyy'}}</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="4">
<div collapse="jobCollapsed[$index]">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Job Details</th>
</tr>
</thead>
<tbody ng-repeat="detail in jobCollection[$index].jobDetails">
<tr><td>{{detail.detail1}}</td></tr>
<tr><td>{{detail.detail2}}</td></tr>
<tr><td>{{detail.detail3}}</td></tr>
<tr><td>{{detail.detail4}}</td></tr>
<tr><td>{{detail.detail5}}</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
这里是 Javascript：
var myApp = angular.module('myApp', ['smart-table'])
myApp.controller('basicCtrl', ['$scope', '$filter',
function ($scope) {
$scope.tableRowExpanded = false;
$scope.tableRowIndexCurrExpanded = "";
$scope.tableRowIndexPrevExpanded = "";
$scope.jobCollapsed = [true, true, true, true, true, true]
$scope.openDetail = function (index) {
if ($scope.tableRowExpanded === false && $scope.tableRowIndexCurrExpanded === "") {
$scope.tableRowIndexPrevExpanded = "";
$scope.tableRowExpanded = true;
$scope.tableRowIndexCurrExpanded = index;
$scope.jobCollapsed[index] = false;
} else if ($scope.tableRowExpanded === true) {
if ($scope.tableRowIndexCurrExpanded === index) {
$scope.tableRowExpanded = false;
$scope.tableRowIndexCurrExpanded = "";
$scope.jobCollapsed[index] = true;
} else {
$scope.tableRowIndexPrevExpanded = $scope.tableRowIndexCurrExpanded;
$scope.tableRowIndexCurrExpanded = index;
$scope.jobCollapsed[$scope.tableRowIndexPrevExpanded] = true;
$scope.jobCollapsed[$scope.tableRowIndexCurrExpanded] = false;
}
}
};
$scope.jobCollection = [
{
company: 'Dell',
location: 'Madison, WI',
position: 'Software Development Advisor',
startDate: new Date('2015/06'),
stopDate: new Date('2015/08'),
jobDetails: [{
detail1: 'Created a light-weight, portable product that stores logs accessible from a web or mobile browser',
detail2: 'Created an appender to synchronously transfer logs to above product',
detail3: 'Learned many new technologies in a short amount of time to develop product.',
detail4: 'Used AGILE programming techniques'
}]
},
{
company: 'Blue Harbor Resort',
location: 'Sheboygan, WI',
position: 'IT Assistant',
startDate: new Date('2015/02'),
stopDate: new Date('2015/05')
},
{
company: 'Lakeland College',
location: 'Sheboygan, WI',
position: 'IT Helpdesk',
startDate: new Date('2015/01'),
stopDate: new Date('2015/05')
},
{
company: 'Kleen Test Products',
location: 'Port Washington, WI',
position: 'Quality Technician',
startDate: new Date('2013/07'),
stopDate: new Date('2015/01')
},
{
company: 'Rockline',
location: 'Sheboygan, WI',
position: 'Quality Assurance Analyst',
startDate: new Date('2013/01'),
stopDate: new Date('2013/05')
},
{
company: 'Orion Energy Systems',
location: 'Plymouth, WI',
position: 'Engineering Aide',
startDate: new Date('2011/05'),
stopDate: new Date('2011/09')
}
];
$scope.status = {
open: true
}
}]);
【问题讨论】：
标签： javascript html angularjs html-table