我们的团队正在尝试在ServiceNow中创建一个具有可扩展/可折叠行的窗口小部件。我们在让它正常工作方面遇到了很多麻烦。以下是我们目前的代码:
<table class="table table-responsive">
<thead>
<tr>
<th></th>
<th ng-repeat="field in data.fields_array track by $index" ng-click="setOrderBy(field)" tabindex="0">
<div class="th-title" aria-label="${Sort by } {{data.column_labels[field]}}">{{data.column_labels[field]}}
<i class="fa" ng-if="field == data.o" ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]" aria-label="${Sorted by } {{data.column_labels[field]}} {{data.d == 'asc' ? '${Ascending}': '${Descending}' }}"></i>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.list track by item.sys_id" data-toggle="collapse" href="#{{item.pcs_task_type_sysID}}" aria-expanded="true" aria-controls="collapseOne" role="button"> <!--ng-click="expand(item)" class="clickableTableRow" -->
<td>
<i ng-if="field[$index] == field[0]" ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
</td>
<td role="text" aria-label="{{item[field].display_value}}" class="pointer" ng-class="{selected: item.selected}" ng-repeat="field in ::data.fields_array track by $index" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
{{::item[field].display_value}}
</td>
<td>
<div id="{{item.pcs_task_type_sysID}}" class="collapse">
<sp-widget widget="item.widget"></sp-widget>
</div>
</td>
</tr>
</tbody>
</table>
上面的代码产生以下内容(显然不正确):
我知道,而不是,可折叠的div应该在一个,但是当我将它移动到它自己的行,如下所示,新行将根本不会扩展。
<table class="table table-responsive">
<thead>
<tr>
<th></th>
<th ng-repeat="field in data.fields_array track by $index" ng-click="setOrderBy(field)" tabindex="0">
<div class="th-title" aria-label="${Sort by } {{data.column_labels[field]}}">{{data.column_labels[field]}}
<i class="fa" ng-if="field == data.o" ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]" aria-label="${Sorted by } {{data.column_labels[field]}} {{data.d == 'asc' ? '${Ascending}': '${Descending}' }}"></i>
</div>
</th>
</tr>
</thead>
<tbody> <!-- id="{{item.sys_id}}_task_body" class="panel-collapse collapse in dataBlock"-->
<tr ng-repeat="item in data.list track by item.sys_id" data-toggle="collapse" href="#{{item.pcs_task_type_sysID}}" aria-expanded="true" aria-controls="collapseOne" role="button"> <!--ng-click="expand(item)" class="clickableTableRow" -->
<td>
<i ng-if="field[$index] == field[0]" ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
</td>
<td role="text" aria-label="{{item[field].display_value}}" class="pointer" ng-class="{selected: item.selected}" ng-repeat="field in ::data.fields_array track by $index" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
{{::item[field].display_value}}
</td>
</tr>
<tr>
<td>
<div id="{{item.pcs_task_type_sysID}}" class="collapse"><!--ng-if="item.showDescriptor" -->
<sp-widget widget="item.widget"></sp-widget>
</div>
</td>
</tr>
</tbody>
</table>
为了让这个工作正常,我们缺少什么?
我在html元素后面的注释中看到ng-click="expand(item)"
,但我没有看到它实际出现在元素中,因此单击时将永远不会调用该函数。
data-toggle
不足以将item.showDescriptor
的值更改为true或false(现在,看起来data-toggle
是唯一试图控制显示的东西)...我也不确定是否在tr
上进行了调整元素会成功......
<tr ng-repeat="item in data.list track by item.sys_id">
<td>
<span ng-click="expand(item)">
<i ng-class="{'pull-center text-success glyphicon glyphicon-check' : item.completed !='Not Completed','text-danger glyphicon glyphicon-warning-sign' : item.completed == 'Not Completed'}"></i>
Click me to expand
</span>
</td>
<td>
<span ng-if="item.showDescriptor">
I should conditionally show
</span>
</td>
</tr>