我在表格中创建了一个表格，但我想只在手风琴时点击显示第二个表格。我试图实现我在这里找到的代码：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
}
}]);
答案 0 :(得分：0)
您可以使用ng-if来决定是否创建详细信息元素，还可以使用showDetails之类的数组来存储每个项目的已打开状态。
var app = angular.module('my-app', [], function() {})
app.controller('basicCtrl', function($scope) {
$scope.showDetails = []
$scope.openDetail = function(index) {
$scope.showDetails[index] = !$scope.showDetails[index];
};
$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'),
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: '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
}
})<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-app="my-app" 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 ng-if="job.jobDetails.length" ng-show="showDetails[$index]">
<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 job.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>
</div>
您还可以将已打开的状态存储在job对象本身中，如
var app = angular.module('my-app', [], function() {})
app.controller('basicCtrl', function($scope) {
$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'),
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: '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
}
})<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-app="my-app" 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="job.opened = !job.opened">
<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 ng-if="job.jobDetails.length" ng-show="job.opened">
<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 job.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>
</div>