nested ng-tables with common filtering and sorting

时间:2016-07-04 08:19:58

标签: angularjs sorting filtering ngtable

I am trying to found how i can have a table with nested table or second level data. With ng-repeat-start i create the desired ui result but i can't do sorting and filtering in nested data html code is :

<table ng-table="list.tableParams"
class="table table-condensed table-bordered table-striped">
<tr ng-repeat-start="row in $data">
    <td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
        <span ng-if="row.data.length > 0" class="glyphicon"
        ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
        ng-click="row.hideRows=!row.hideRows"></span> {{row.name}}
    </td>
    <td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
    <td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
    <td data-title="'Country'" filter="{ country: 'select'}"
        filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-hide="!row.hideRows" ng-repeat="sub in row.data">
    <td style="padding-left: 50px" filter="{name: 'text'}">{{sub.name}}<br />
    <td>{{sub.age}} members</td>
    <td>{{sub.money}}</td>
    <td>{{row.country}}</td>
</tr>
<tr ng-repeat-end></tr>

and my data and table params are :

vm.simpleList =[{"name":"Karen","age":45,"money":798,"country":"Czech Republic",
         data:[{"name":"lala","age":59,"money":523,"country":"American Samoa"},
                {"name":"aaa","age":56,"money":540,"country":"Canada"},
                {"name":"Cat","age":57,"money":746,"country":"China"},
                {"name":"Christian","age":59,"money":572,"country":"Canada"},
                {"name":"Tony","age":60,"money":649,"country":"Japan"},
                {"name":"Cat","age":47,"money":675,"country":"Denmark"}]},
                        {"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
                        {"name":"Bismark","age":48,"money":672,"country":"Denmark"},
                        {"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
                        {"name":"Anthony","age":45,"money":559,"country":"Japan"},
                        {"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
                        {"name":"Stephane","age":57,"money":662,"country":"Japan"},
                        {"name":"Alex","age":59,"money":523,"country":"American Samoa"},
                        {"name":"Tony","age":56,"money":540,"country":"Canada"},
                        {"name":"Cat","age":57,"money":746,"country":"China"},
                        {"name":"Christian","age":59,"money":572,"country":"Canada"},
                        {"name":"Tony","age":60,"money":649,"country":"Japan"},
                        {"name":"Cat","age":47,"money":675,"country":"Denmark"},
                        {"name":"Stephane","age":50,"money":674,"country":"China"},
                        {"name":"Markus","age":40,"money":549,"country":"Portugal"},
                        {"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
                        {"name":"Stephane","age":54,"money":549,"country":"China"},
                        {"name":"Karen","age":50,"money":611,"country":"American Samoa"},
                        {"name":"Therese","age":53,"money":754,"country":"China"},
                        {"name":"Bismark","age":49,"money":791,"country":"Canada"},
                        {"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
                        {"name":"Tony","age":43,"money":674,"country":"Canada"},
                        {"name":"Karen","age":47,"money":700,"country":"Portugal"},
                        {"name":"lala","age":0,"money":0,"country":null}];

    vm.tableParams = new NgTableParams({
      sorting: {name: "asc"},
      count: 5
    }, {
      counts: [],
      dataset: vm.simpleList
    });

I can't found anywhere an example or a way to do that. If i have nested tables like this :

<table ng-table="list.tableParams">
    <tr ng-repeat-start="row in $data">
        <!-- td's -->
        <td data-title="'Name'" sortable="'name'" filter="{name, data.name: 'text'}">
            <span ng-if="row.data.length > 0" class="glyphicon"
            ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
            ng-click="list.createNestedTable(row)"></span> {{row.name}}
        </td>
        <td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
        <td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
        <td data-title="'Country'" filter="{country: 'select'}"
            filter-data="list.countries">{{row.country}}</td>
    </tr>
    <tr ng-repeat-end ng-hide="!row.hideRows" >
        <td>
            <table ng-table="list.tableParams2">
                <tr ng-repeat="sub in $data">
                    <td style="padding-left: 50px" filter="{name: 'text'}" sortable="'name'">{{sub.name}}<br />
                    <td filter="{age: 'number'}" sortable="'age'">{{sub.age}}</td>
                    <td filter="{money: 'number'}" sortable="'money'">{{sub.money}}</td>
                    <td filter="{country: 'select'}" sortable="'country'">{{row.country}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

How can i make filtering in both columns name and data.name (nested data) from the common external filtering? Something like that : filter="{name, data.name: 'text'}"

0 个答案:

没有答案