Question

尝试在我的表格中使用智能表进行分页，过滤和搜索时遇到问题。

在将使用请求的JSON转换为对象时，我正在使用该表。在这种情况下，我做了：

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

当我需要包括分页，排序和搜索时，问题出现了。然后使用Smart Table，直到那时我一直在为我服务。

如果要使用它的功能，我的表数组不能像以前那样是对象，它需要是JSON。在这种情况下，具有以下格式：

 $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
  }
]

按照Smart Table文档中的教程，我创建了下表：

<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>

我不知道为什么它没有在控制台中显示任何错误，也没有在我的表中显示JSON数据。谁能告诉我我做错了什么？

AngularJS：1.3

更新

Ero的答案是对的，我只需要将我的数组再次转换为对象，然后使用ng-repeat。我仍然使用Smart Table erro进行过滤（对于对象数组不起作用），但我认为这是插件错误，我将在github论坛上查看。

Answer 1

由于您的ng-repeat超过了<tr>，因此您不需要使用ng-repeat-start和ng-repeat-end。封装<tr>标记已经重复了它的内部HTML。尝试取出这些标记，只使用item来引用当前对象。我为您更改了以下HTML（未经测试！）：

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

Answer 2

由于对象具有唯一标识符属性EstoqueId，因此请将其用于跟踪而不是$index：

<tr ng-repeat="e in estoqueJSON | filter : paginate | orderBy:sortType:sortReverse | filter:searchField track by e.EstoqueId">

来自文档：

如果您正在处理具有唯一标识符属性的对象，则应使用此标识符而不是对象实例[或$index]进行跟踪。如果您稍后重新加载数据，ngRepeat将不必为已呈现的项重建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这可以显着提高渲染性能。

— AngularJS ng-repeat Directive API Reference - Tracking

使用Angular“track by $ index”，分页，过滤和排序不起作用

2 个答案: