Using Angular "track by $ index" with pagination, filtering and sorting

Question

Using Angular "track by $ index" with pagination, filtering and sorting

Navigation

#1 by (0 votes)

0

Good morning!

I'm having a bad problem when trying to use the Smart Table, with paging, filtering and searching in my table.

I was with the table working when converting a JSON that consumed by an object request. In this case, I did:

$scope.estoque = JSON.parse(data.data);

The problem came when I needed to include paging, sorting, and searching. So using Smart Table , which until then I had been servicing what I needed, this, as long as I did not have to sort and nor search in a table.

In case, to use the functionality of it, my table array can not be object as it was previously, it needs to be JSON. Which in the case has the format below:

 $scope.estoqueJSON = data.data;

[
  {
    "EstoqueId": 553,
    "DescricaoEstoque": null,
    "NomeMaterial": "Cabo de Fibra Óptica 04FO Multimodo - Indoor / Outdoor - 62,5/125 Furukawa",
    "CodigoMaterial": "100",
    "Ni": "",
    "QtdMaterial": 3.0,
    "QtdMin": 0.0,
    "Unidade": "m",
    "MaterialId": 1
  }
]

Following what you say on the smart table website and AngularJS 1, I then created the table as follows:

<table st-table="estoqueStr" st-set-filter="myStrictFilter" class="table table-striped table-responsive">
                <thead style="text-align:center;">
                    <tr>
                        <th st-sort="CodigoMaterial" style="width:20px; font-weight:bold; text-align:center;">Código</th>
                        <th st-sort="Ni" style="width:20px; font-weight:bold; text-align:center;">Ni</th>
                        <th st-sort="NomeMaterial" style="width:20px; font-weight:bold; text-align:center;">Material</th>
                        <th st-sort="Unidade" style="width:20px; font-weight:bold; text-align:center;">UNI.</th>
                        <th st-sort="QtdMaterial" style="width:20px; font-weight:bold; text-align:center;">Qtd</th>
                        <th st-sort="QtdMin" style="width:20px; font-weight:bold; text-align:center;">Qtd Min.</th>
                    </tr>
                    <tr>
                        <th style="width:20px;">
                            <input style="text-align:center;" st-search="CodigoMaterial" placeholder="Código material" class="input-sm form-control" type="search" />
                        </th>
                        <th style="width:20px; text-align:center;">
                            <input style="text-align:center;" st-search="Ni" placeholder="Ni" class="input-sm form-control" type="search" />
                        </th>
                        <th style="width:auto; text-align:center;">
                            <input style="text-align:center;" st-search="NomeMaterial" placeholder="Nome material" class="input-sm form-control" type="search" />
                        </th>
                        <th style="width:10px; text-align:center;">
                            <input style="text-align:center;" st-search="Unidade" placeholder="Unidade" class="input-sm form-control" type="search" />
                        </th>
                        <th style="width:10px; text-align:center;">
                            <input style="text-align:center;" st-search="QtdMaterial" placeholder="Qtde atual" class="input-sm form-control" type="search" />
                        </th>
                        <th style="width:10px; text-align:center;">
                            <input style="text-align:center;" st-search="QtdMin" placeholder="Qtde mínima" class="input-sm form-control" type="search" />
                        </th>

                    </tr>
                </thead>
                <tbody id="" class="">
                    <tr ng-repeat="e in estoqueJSON | filter : paginate | orderBy:sortType:sortReverse | filter:searchField track by $index">
                        <td ng-repeat-start="item in e.value"></td>
                        <td style="text-align:center;">{{item.CodigoMaterial}}</td>
                        <td style="text-align:center;">{{item.Ni}}</td>
                        <td>{{item.NomeMaterial}}</td>
                        <td style="text-align:center;">{{item.Unidade}}</td>
                        <td style="text-align:right; color:black;">
                            <span e-form="tableform" editable-number="e.QtdMaterial" onbeforesave="checkQtdEstoque(e, $data)">{{item.QtdMaterial}}</span>
                        </td>
                        <td style="text-align-last:right; color:black;" ng-repeat-end>
                            <span editable-number="e.QtdMin" e-form="tableform" onbeforesave="checkQtdMin(e, $data)">{{item.QtdMin}}</span>
                        </td>

                    </tr>
                </tbody>
            </table>

I do not know why the hell not the error and also does not display the JSON data. > (Can anyone tell me what navalhada I'm doing? Thank you!

AngularJS: 1.3

angularjs filtro order-by

asked by anonymous 05.06.2017 / 17:01

1 answer

Graphics Type Do not find Google Maps class

score 0 · Answer 1

When you use Smart Table, the st-sort and st-search directives do the service for you - you do not need to include filter and orderBy of ngRepeat . You also do not need to use track by , as this is useful for binding a property to a ngModel . Reference: In the example of library site , the terms in ng-repeat are not:

<tr ng-repeat="row in displayedCollection">
            <td>{{row.firstName}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate}}</td>
            <td>{{row.balance}}</td>

As for JSON, you always use objects for the features, whereas the JSON format is used only for data storage and transfer. Like JSON, the variable contains only one string and it would be complex to fetch the data internally. I quote the library site again as an example:

scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];