Как создать расширенную строку, используя Smart Table в AngularJS? - PullRequest
Новая
       22

Как создать расширенную строку, используя Smart Table в AngularJS?

0 голосов
/ 08 июля 2019

Я пытался добавить панель расширения к моему умному столу в угловом положении.В таблице показаны данные, которые отображаются после нажатия кнопки ввода, и я хочу, чтобы кнопка расширения отображалась сбоку каждой из строк, чтобы я мог отобразить другие данные ниже.Я следовал этому умному столу: https://plnkr.co/edit/W8S3EaDI9sxuj8IjHiCN?p=preview, который делает именно то, что я пытаюсь сделать.Но когда я копирую тот же самый код, он не работает в моей угловой версии.Также кажется, что демонстрационный код был сделан с Angular версии 1 (AngularJS). 

<div ng-controller="safeCtrl" class="table_class">

    <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th st-ratio="20">#</th>
                <th st-sort="Delivered" style="color: white;">Delivered</th>
                <th st-sort="orgRadar" style="color: white;">Organization Radar</th>
                <th st-sort="root_build" style="color: white;">Root Build</th>
                <th st-sort="inserted_by" style="color: white;">Inserted By</th>
                <th st-sort="milestone" style="color: white;">Milestone</th>
                <th st-sort="applicable_chipsets" style="color: white;">Applicable Chipsets</th>
                <th st-sort="project_tag" style="color: white;">Project Tag</th>
                <th st-sort="gerrits" style="color: white;">Gerrits</th>
                <th st-sort="inserted_on" style="color: white;">Inserted On</th>
                <th st-sort="SDK" style="color: white;">SDK</th>
            </tr>
            <tr>
                <th colspan="10"><input st-search="" class="form-control"
                        placeholder="global search ..." type="text" /></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in displayedCollection" *ngFor="let item of newPost.posts">
                <td>
                    <button ng-if="row.expanded" ng-click="row.expanded = false"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
                    <button ng-if="!row.expanded" ng-click="row.expanded = true"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
                </td>
                <td style="color: red;">{{item.Delivered}}</td>
                <td style="color: red;">{{item.orgRadar}}</td>
                <td style="color: red;">{{item.root_build}}</td>
                <td style="color: red;">{{item.inserted_by}}</td>
                <td style="color: red;">{{item.milestone}}</td>
                <td style="color: red;">{{item.applicable_chipsets}}</td>
                <td style="color: red;">{{item.project_tag}}</td>
                <td style="color: red;">{{item.gerrits}}</td>
                <td style="color: red;">{{item.inserted_on}}</td>
                <td style="color: red;">{{item.SDK}}</td>
                <td>
                    <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                        <i class="glyphicon glyphicon-remove-circle">
                        </i>
                    </button>
                </td>
            </tr>
            <tr ng-if="row.expanded" ng-repeat-end="">
                <td colspan="10">
                    <b>Original Radar<br /></b>
                </td>
                <td colspan="10" st-ratio="20">{{item.orgRadar}}</td>
            </tr>
        </tbody>
    </table>
</div>

МОЙ ТЕКУЩИЙ ВЫХОД: мой текущий вывод

ДЕМО-ВЫХОД: демо-выход

Было бы здорово, если бы кто-нибудь мог помочь мне с этой проблемой.Спасибо!

...