of-table :过滤列
ng-table : filter on column
我正在使用 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"),我不知道该怎么做。
如果有人知道...
[更新]
<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>
如前所述 here 并且当我查看文档时,我得出结论 ng-table 不太适合嵌套模型。
解决方法是根据 contats
的数组数据创建 属性,然后按它进行过滤。
因此,对于每个 consultant
,我添加了一个 属性 contracts
,其中包含其 typeContrats.contats
:
的串联字符串
_.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例子。
我希望这就是您要实现的目标。
我正在使用 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"),我不知道该怎么做。 如果有人知道...
[更新]
<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>
如前所述 here 并且当我查看文档时,我得出结论 ng-table 不太适合嵌套模型。
解决方法是根据 contats
的数组数据创建 属性,然后按它进行过滤。
因此,对于每个 consultant
,我添加了一个 属性 contracts
,其中包含其 typeContrats.contats
:
_.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例子。
我希望这就是您要实现的目标。