mercredi 1 juillet 2015

How to create different section in angular template (html file) conditionally

I am constructing three different table as following.

There is a lot of repetitive code in it.

The only different in each table is studentPermissions[] array which contain three objects for each student. So under each table i am just changing it for each student like studentPermissions[0], studentPermissions[1] and studentPermissions[2].

Is there any further better i can write same code in less no of lines?

<div class="module-container">
    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[0].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[0].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[1].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[1].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[2].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[2].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks

Also, I have to show data for each customer in septate table. this is requirement

Aucun commentaire:

Enregistrer un commentaire