は、これが私の見解どのようにアイコンが、私は角jsのテーブルを持っている

Question

が、私はフィルタ/検索機能が、自動アイコンを含めるようにテキストフィールドを追加したい示し変更が間違った場所

を示しているある

<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の横に表示するにはどうすればいいですか？私はそこで良く見えるだろうと思う。私が過度に反応しない限り。または、私がsearch textsを表示する最初のものの下に別の<tr>を作成する方法は？

これはレンダリング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> 

Answer 1

スパンでのプット・アイコン

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

Answer 2

ない角度に非常に精通していますが、テーブルヘッダの上/外の入力フィールドを入れてみてくださいだろうか？これにより、より均一に見えます。

Answer 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：私は理解していない

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