2016-03-31 3 views
0

ng-tableを使用していて、カラムをフィルタリングしたい。 シンプルなデータで動作します。ng-table:カラムのフィルタ

<table ng-table="tableParams" show-filter="true" class="table table-striped table-bordered table-hover" id="dynamic-table"> 
    <tr ng-repeat="consultant in $data"> 
     <td class="text-center" data-title="'Ville résidence'" filter="{ 'villeResidence': 'text' }">{{consultant.villeResidence}}</td> 
     <td class="text-center" data-title="'Contrat'" filter="{ 'typeContrat.contrat': 'text' }" > 
      <span ng-repeat="typeContrat in consultant.typeContrats"> 
       <a class="form-control-static" ui-sref="type-contrat-detail({id: {{typeContrat.id}}})">{{typeContrat.contrat}}</a>{{$last ? '' : ', '}} 
      <span> 
     </td> 
    </tr> 
</table> 

もっと複雑な列(ここでは「contrat」)では、どうやってそれを行うのか分かりません。 誰もが知っていれば...

[UPDATE]

<td class="text-center" data-title="'Contrat'" filter="{ 'typeContrat.contrat': 'text' }" data-title-text="Contrat"> 
     <!-- ngRepeat: typeContrat in consultant.typeContrats --> 
    <span ng-repeat="typeContrat in consultant.typeContrats" class="ng-binding ng-scope"> 
     <a class="form-control-static ng-binding" ui-sref="type-contrat-detail({id: 1})" href="#/type-contrat/1">CDI</a>, 
     <span>  
     </span> 
    </span> 
    <!-- end ngRepeat: typeContrat in consultant.typeContrats --> 
    <span ng-repeat="typeContrat in consultant.typeContrats" class="ng-binding ng-scope"> 
      <a class="form-control-static ng-binding" ui-sref="type-contrat-detail({id: 2})" href="#/type-contrat/2">Freelance</a>, 
     <span></span> 
    </span> 
    <!-- end ngRepeat: typeContrat in consultant.typeContrats --> 
    <span ng-repeat="typeContrat in consultant.typeContrats" class="ng-binding ng-scope"> 
      <a class="form-control-static ng-binding" ui-sref="type-contrat-detail({id: 3})" href="#/type-contrat/3">Portage</a> 
     <span></span> 
    </span><!-- end ngRepeat: typeContrat in consultant.typeContrats --> 
</td> 
+0

あなたのデータはどのように見えますか? '{villeResidence:" France "、typeContrat:{// ?? ...}}' – Lulylulu

+0

メインポストのhtml生成コードを追加しました – user1260928

答えて

1

としてはhereに言及し、私はドキュメントに周りを見回したように、私はNG-表は、ネストされたモデルには適していません結論付けました。

アレイデータに基づいてプロパティを作成し、contatsにしてフィルタすることができます。 ので、各consultantのために、私はそのtypeContrats.contatsの連結文字列が含まれているプロパティcontractsを追加しました:

_.forEach(consultantData, function(value) { 
    var contrats = _.map(value.typeContrats, 'contrat'); 
    value.contrats = _.join(contrats, ', '); 
}); 

そしてHTMLでその後:ここ

<td class="text-center" data-title="'Contrat'" filter="{ 'contrats': 'text' }"> 

は一例でfiddleです。

私はあなたが達成しようとしていたことを望みます。

+0

ありがとうございます。私も別の財産を考えていた。 ngTableがネストされたモデルにはあま​​り適していないと言っているので、テーブル用の他の良いanglejsモジュールも知っていますか? – user1260928

+0

問題はありません:) [UIグリッド] [http://ui-grid.info/]をご覧ください。私はそれがネストされたモデルに適しているかどうかはわかりませんが、少しモードが成熟しているように見えます。 – Lulylulu

関連する問題