gpt4 book ai didi

html - 使用 css 使表格响应后,Angular ng-click 不听

转载 作者:行者123 更新时间:2023-11-28 07:02:13 25 4
gpt4 key购买 nike

我的表格单元格中有一个很棒的字体图标。如果我点击它,ng-click 正在监听并调用我的函数,但如果我的屏幕小于 900 像素,则 ng-click 不再监听。

这是我用来使表格响应的 CSS:

@media 
only screen and (max-width: 900px),
(min-device-width: 768px) and (max-device-width: 1024px) {



/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Force table to not be like tables anymore */
#tblTextResult, thead , tbody ,th ,td ,tr{
display: block;
}

tr { border: 1px solid black; }

td {
/* Behave like a "row" */
border-bottom: 1px solid black;
position: relative;
padding-left: 30% !important;

}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0px;
left: 6px;
width: 45%;
padding-right: 20px;
white-space: nowrap;
}

#tblTextResult i {
display:tab;
}

/*
Label the data
*/
#tblTextResult td:nth-of-type(1):before { content: "Text"; }
#tblTextResult td:nth-of-type(2):before { content: "Text_ID"; }
#tblTextResult td:nth-of-type(3):before { content: "Description"; }
#tblTextResult td:nth-of-type(4):before { content: "Meaning_ID"; }
#tblTextResult td:nth-of-type(5):before { content: "Language"; }
}

表格看起来不错,但我的标签 ({text.meaning_id}) 的 ng-click 不再起作用了。这是我的 html:

 <div id="textResult" >
<table id="tblTextResult" ts-wrapper>
<thead>
<tr>
<th class="tblTH"> <a href="#" ng-click="sortType = 'text';sortReverse = !sortReverse">
Text
<span ng-show="sortType == 'text' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'text' && sortReverse" class="fa fa-caret-up"></span> </a></th>

<th class="tblTH"> <a href="#" ng-click="sortType = 'text.id';sortReverse = !sortReverse">
Text_ID
<span ng-show="sortType == 'text.id'&& !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'text.id' && sortReverse" class="fa fa-caret-up"></span> </a></th>

<th class="tblTH"> <a href="#" ng-click="sortType = 'description';sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'description'&& !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span> </a> </th>
<th class="tblTH"> <a href="#" ng-click="sortType = 'text.meaning_id';sortReverse = !sortReverse">
Meaning_ID
<span ng-show="sortType == 'text.meaning_id'&& !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'text.meaning_id' && sortReverse" class="fa fa-caret-up"></span></a> </th>
<th class="tblTH"> <a href="#" ng-click="sortType = 'langName';sortReverse = !sortReverse">
Language
<span ng-show="sortType == 'langName''&& !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'langName' && sortReverse" class="fa fa-caret-up"></span> </a> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="text in Texte | orderBy:sortType:sortReverse | filter:filterText" >
<td> {{text.text}} </td>
<td > {{text.id}} </td>
<td> {{text.description}} </td>
<td ng-model="meaningID"> {{text.meaning_id}} <i name="btnSearch" click="getMeaningID()"ng-click="getMeaningID()"class="fa fa-search"></i></td>
<td> {{text.langName}} </td>
</tr>
</tbody>
</table>
</div>

有人可以告诉我为什么我的 ng-click 在使此表响应后不再工作吗?我仍然可以看到 ng-click 被分配给了 Firebug 中的 i 标签!感谢您的帮助:)

最佳答案

我的解决方案是:

#tblTextResult td i{
display:table;
}

在我再次将此显示属性设置为表后,事件监听器再次监听:)

关于html - 使用 css 使表格响应后,Angular ng-click 不听,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33164990/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com