我想使用AngularJs显示数据库的结果并将其显示在可折叠树中。以下是我的脚本。
AngularJs控制器
ViewReportsController: function (scope, routeParams, resourceFactory, location, route) {
scope.reports = [];
scope.type = routeParams.type;
//to display type of report on breadcrumb
var typeReport = routeParams.type.replace(routeParams.type[0], routeParams.type[0].toUpperCase()) + " " + "Reports";
scope.type = typeReport;
scope.routeTo = function (report) {
location.path('/run_report/' + report.report_name).search({reportId: report.report_id, type: report.report_type});
};
if (!scope.searchCriteria.reports) {
scope.searchCriteria.reports = null;
scope.saveSC();
}
scope.filterText = scope.searchCriteria.reports;
scope.addLocaleReportName = function (){
if(document.getElementsByName("locale_name") != undefined && scope.reports){
if(scope.reports[0].report_locale_name == undefined){
var result = document.getElementsByName("locale_name");
for(var i=0; i<result.length; i++) {
scope.reports[i].report_locale_name = result[i].value;
}
//console.log(JSON.stringify(scope.reports));
}
scope.onFilter();
}
};
scope.filterByReportSubType = function(report) {
return !(report.report_subtype === 'Triggered');
}
scope.onFilter = function () {
scope.searchCriteria.reports = scope.filterText;
scope.saveSC();
};
if (routeParams.type == 'all') {
resourceFactory.runReportsResource.get({reportSource: 'FullReportList', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'savings') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Savings', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'timedeposit') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Time Deposit', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'loans') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Loan', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'shares') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Shares', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'accounting') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Accounting', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'clients') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Client', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'funds') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Fund', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'application') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Across Application', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
} else if (routeParams.type == 'teller') {
resourceFactory.runReportsResource.get({reportSource: 'reportCategoryList', R_reportCategory: 'Teller Management', parameterType: true, genericResultSet: false}, function (data) {
scope.reports = scope.getReports(data);
});
}
// Remove the duplicate entries from the array. The reports api returns same report multiple times if it have more than one parameter.
scope.getReports = function (data) {
var prevId = -1;
var currId;
var reports = [];
for (var i = 0; i < data.length; i++) {
currId = data[i].report_id;
if (currId != prevId)
reports.push(data[i]);
prevId = currId;
}
return reports;
};
}
使用表格格式的当前显示。但我想在可折叠树中更改此内容
表格视图
<div>
<table class="table">
<thead>
<tr class="graybg">
<th>Name</th>
<th>Type</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr class="pointer-main" ng-repeat="report in reports| orderBy:'report_name':reverse | filter:filterByReportSubType">
<td class="pointer" data-ng-click="routeTo(report)">{{''+report.report_name</td>
<td class="pointer" data-ng-click="routeTo(report)">{{report.report_type}}</td>
<td class="pointer" data-ng-click="routeTo(report)">{{report.report_category}}</td>
</tr>
</tbody>
</table>
</div>
我希望实现的格式类似于http://plnkr.co/edit/l8uzoOSiu0AA7phytnYi?p=preview