如何更改图标显示的位置

Question

我有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以显示<i>？

这是渲染html，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> 元素。

assert_selector

Answer 1

只需使用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>

Answer 2

将图标放入范围

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

Answer 3

不太熟悉angular，但是你可以尝试将输入字段放在表头之外/之上吗？这样看起来会更均匀。