Question

我想生成下面给出的报告，并且还想动态指定标题列的colspan

Actualreport

获得下面的输出。

输出

这是我的HTML代码

<table class="table table-bordered">
                    <thead>
                        <tr>
                            <th colspan="2"><b>Class : </b></th>
                            <th ng-repeat ="column in ColumnList"><b>{{column.Column}}</b></th>
                        </tr>
                        <tr >
                            <td><b>Roll.No.</b></td>
                            <td class="vertical_text"><b>Name</b></td>
                            <td ng-repeat="subcol in SubColumnList"><b>{{subcol.Sub_Column}}</b></td>
                            <td><b>Mark 50</b></td>
                            <td><b>Mark 100</b></td>
                            <td><b>10%</b></td>
                            <td>Grade</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="stud in StudentList">
                            <td>{{stud.RollNo}}</td>
                            <td>{{stud.Name}}</td>
                            <td ng-repeat="mark in MarkList" ng-if="mark.Student_Id == stud.Student_Id">{{mark.Mark}}</td>
                            <td>{{stud.Mark50}}</td>
                            <td>{{stud.Mark100}}</td>
                            <td>{{stud.Mark10}}</td>
                            <td>{{stud.Grade}}</td>
                        </tr>
                    </tbody>
                </table>`

的Javascript

$scope.loadtopic = function () {
    $http({
        method: 'GET',
        url: $scope.appPath + "aassessmentreport/topicsummary",
        params: {
            AcyId: $scope.selectedacademic.Key, ClassId: $scope.selectedacyclass.Key, SectionId: $scope.selectedacysection.Key,
            SubjectId: $scope.selectedsubject.Key, Assessment_Id: $scope.selectedAssessment.Key
        }
    }).success(function (result, status) {
        $scope.tabledata = result;
        $scope.ColumnList = result.ColumnList;
        $scope.StudentList = result.StudentList;
        $scope.MarkList = result.MarkList;
        $scope.SubColumnList = result.SubColumnList;
        console.log("RESULT", result);
    });
};

从API

收到的值

RESULT Object {ResportList: null, ColumnList: Array[4], SubColumnList: Array[16], MarkList: Array[4], SubMarkList: Array[0]…}

Answer 1

你应该这样做：

在您的主td上，目前您有ng-repeat

<table class="table table-bordered">
    <thead>
        <tr>
            <th colspan="2"><b>Class : </b></th>
            <th ng-repeat ="column in ColumnList"><b>{{column.Column}}</b></th>
        </tr>
        <tr >
            <td><b>Roll.No.</b></td>
            <td class="vertical_text"><b>Name</b></td>
            <td colspan="100%">
                <table>
                    <tbody>
                        <tr>
                            <td ng-repeat="subcol in SubColumnList"><b>{{subcol.Sub_Column}}</b></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td><b>Mark 50</b></td>
            <td><b>Mark 100</b></td>
            <td><b>10%</b></td>
            <td>Grade</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="stud in StudentList">
            <td>{{stud.RollNo}}</td>
            <td>{{stud.Name}}</td>
            <td colspan="100%">
                <table>
                    <tbody>
                        <tr>
                            <td ng-repeat="mark in MarkList" ng-if="mark.Student_Id == stud.Student_Id">{{mark.Mark}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>{{stud.Mark50}}</td>
            <td>{{stud.Mark100}}</td>
            <td>{{stud.Mark10}}</td>
            <td>{{stud.Grade}}</td>
        </tr>
    </tbody>
</table>

Answer 2

使用colspan =“{{column.Subcolumn_Count}}”获取预期输出

            <table class="table table-bordered" width="100%">
                        <thead>
                            <tr>
                                <th colspan="2"><b>Class : {{Class}}</b></th>
                                <th colspan="{{column.Subcolumn_Count}}" ng-repeat="column in ColumnList"><b>{{column.Column}}</b></th>
                            </tr>
                            <tr>
                                <th rowspan="2"><b>Roll.No.</b></th>
                                <th rowspan="2"><b>Name</b></th>
                                <th class="verticalTableHeader" ng-repeat="subcol in SubColumnList"><b>{{subcol.Sub_Column}}</b></th>                                   
                            </tr>
                            <tr>
                                <th ng-repeat="subcol in SubColumnList">{{subcol.Allocated_Mark}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="stud in StudentList">
                                <td>{{stud.RollNo}}</td>
                                <td>{{stud.Name}}</td>
                                <td ng-repeat="smark in SubMarkList" ng-if="smark.Student_Id == stud.Student_Id">{{smark.Mark}}</td>
                                <td>{{stud.Mark50}}</td>
                                <td>{{stud.Mark100}}</td>
                                <td>{{stud.Mark10}}</td>
                                <td>{{stud.Grade}}</td>
                            </tr>
                        </tbody>
                    </table>

我想使用angularjs动态显示其对应列下的子列

2 个答案: