如何更改图标显示的位置 [英] How change where the icon show

问题描述

我有Angular js表，我想添加一个文本字段包括过滤器/搜索功能，但自动图标显示错误的地方

这是我的观点

 < table> 
< theader> 
< tr> 
< th at-attribute =Car_ID> 
 Test< br /> 
< input type =textid =filter_idng-model =filter_id/> 
< / th> 
< / tr> 
< / theader> 
< / table> 
  

如何使排序箭头显示在旁边 $ c>。我想在那里看起来更好。除非我反应过度。或者如何在第一个下面创建另一个< tr> 以显示搜索文本？

这是render html， < i> 元素是为角度表自动生成的。

 < th at-attribute =Car_IDng-click =predicate ='Car_ID'; descending =！descending; width => 
 Test< br> 
< input type =textid =filter_idng-model =filter_idclass =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> 
  

解决方案

只需使用css隐藏生成的图标，所以你可以把它放在任何你喜欢和完全控制。

让我们面对它，黑客这些插件永远不优雅，所以只是给自己最好的机会灵活删除插件的选择并处理自己的插件。

 < th at-attribute =Car_IDng-click =predicate = 'Car_ID'; descending =！descending; width => 
 Test< i ng-class =getSortIcon（'Car_ID'，predicate，descending）class =glyphicon glyphicon-chevron-down>< / i> 
< input type =textid =filter_idng-model =filter_id/> 
< / th> 
  

css：

 code> th i：last-child {
 display：none; 
} 
  

编辑

这应该复制相同的功能：

 < i ng-class =getSortIcon '，predicate，descending）class =glyphicon glyphicon-chevron-down>< / i> 
  

I have Angular js table, I want to add a text field to include the filter/search functionality but the automatic icon is showing wrong place

This is my view

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

How I make the sort arrow show right next to Test. I guess would look better there. Unless I overreacting. Or how I create another <tr> below the first one to show the search texts?

This is the render html, the <i> element is autogenerated for the 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>

解决方案

Just hide the generated icon with css and replicate your own so that you can place it wherever you like and have full control.

Let's face it, hacking these plugins is never graceful so just give yourself the best opportunity to be flexible by removing the plugin's choice and handling your own.

<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;
}

edit

This should replicate the same functionality:

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

这篇关于如何更改图标显示的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！