如何更改图标的显示位置答案

【问题标题】：How change where the icon show如何更改图标的显示位置
【发布时间】：2016-12-08 00:34:22
【问题描述】：

我有 Angular js 表，我想添加一个文本字段以包含过滤/搜索功能，但自动图标显示位置错误

这是我的看法

<table>
 <theader>
   <tr>
      <th at-attribute="Car_ID">
          Test <br /> 
          <input type="text" id="filter_id" ng-model="filter_id" />
      </th> 
   </tr>
 </theader>
</table>

如何使排序箭头显示在Test 旁边。我想那里看起来会更好。除非我反应过度。或者我如何在第一个下方创建另一个<tr> 以显示search texts？

这是渲染 html，<i> 元素是为 angular-table 自动生成的。

<th at-attribute="Car_ID" ng-click="predicate = 'Car_ID'; descending = !descending;" width="">
     Test <br> 
     <input type="text" id="filter_id" ng-model="filter_id" class="ng-pristine ng-untouched ng-valid">
     <i style="margin-left: 10px;" ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i>
</th>

【问题讨论】：

我不明白。测试后显示。你能在图片上显示你想在哪里渲染图标吗？
@HamletHakobyan 我认为应该在右侧，不应该更好吗？
是什么生成了图标？
@mtb angular-table samu.github.io/angular-table/examples/examples.html

标签： javascript html css angularjs

【解决方案1】：

将图标放在 span 中

 <i style="margin-left: 10px;" ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i>

【讨论】：

你能说得更具体点吗？图标是自动生成的。

【解决方案2】：

对角度不是很熟悉，但是您可以尝试将输入字段放在表格标题之外/上方吗？这样看起来会更均匀。

【讨论】：

是的，我只是强调这一点。仍在尝试在下面创建另一个标题行。知道该怎么做吗？
我假设您只是在表格中的另一个下方尝试了对吗？如果不试一试，否则我会把盒子放在标签中

【解决方案3】：

只需使用 css 隐藏生成的图标并复制您自己的图标，以便您可以将其放置在您喜欢的任何位置并完全控制。

让我们面对现实吧，破解这些插件从来都不是优雅的，所以只需给自己最好的机会，通过删除插件的选择并处理自己的选择来保持灵活性。

<th at-attribute="Car_ID" ng-click="predicate = 'Car_ID'; descending = !descending;" width="">
  Test <i ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i><br>
  <input type="text" id="filter_id" ng-model="filter_id" />
</th>

css:

th i:last-child {
 display:none;
}

编辑

这应该复制相同的功能：

<i ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i>

【讨论】：

问题是单击标题时排序箭头图标发生变化，我如何克隆<i> 样式？
查看编辑，只是复制被隐藏的功能