Angularjs 使用“角度”；“按$index跟踪”；分页、筛选和排序不起作用

我在尝试使用智能表进行分页、筛选和搜索时遇到问题

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

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

当我需要包括分页、排序和搜索时，问题就出现了。然后使用，直到那时，它一直服务于我所需要的

在这种情况下，要使用它的功能，我的表数组不能像以前那样是对象，它需要是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
  }
]

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

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

科迪戈
镍
材料
大学。
Qtd
Qtd最小值。
{{item.codigomater}
{{item.Ni}}
{{item.NomeMaterial}
{{item.Unidade}
{{item.QtdMaterial}}
{{item.QtdMin}

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

AngularJS:1.3

更新

---

Ero的答案是正确的，我只需要再次转换对象的数组，然后使用ng repeat。我仍然使用Smart Table erro for filter（什么对对象数组不起作用），但我认为这是插件错误，我会在github论坛上查看。

因为你的

ng repeat

是在一个

上，你不需要使用

ng repeat start

和

ng repeat end

。封装的

标记已经重复了它的内部HTML。尝试取出这些标记，仅使用

项

引用当前对象。我为您更改了下面的HTML（未经测试！）：

{{item.codigomater}
{{item.Ni}}
{{item.NomeMaterial}
{{item.Unidade}
{{item.QtdMaterial}}
{{item.QtdMin}

因为您的

ng repeat

在单个

上，所以不需要使用

ng repeat start

和

ng repeat end

。封装的

标记已经重复了它的内部HTML。尝试取出这些标记，仅使用

项

引用当前对象。我为您更改了下面的HTML（未经测试！）：

{{item.codigomater}
{{item.Ni}}
{{item.NomeMaterial}
{{item.Unidade}
{{item.QtdMaterial}}
{{item.QtdMin}

由于对象具有唯一标识符属性，

EstoqueId

，因此将其用于跟踪，而不是

$index

：

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

从文档中：

如果使用具有唯一标识符属性的对象，则应按此标识符而不是对象实例[或

$index

]进行跟踪。如果以后重新加载数据，

ngRepeat

将不必为已呈现的项重新构建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这将显著提高渲染性能

---

由于对象具有唯一标识符属性，

EstoqueId

，因此将其用于跟踪，而不是

$index

：

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

从文档中：

如果使用具有唯一标识符属性的对象，则应按此标识符而不是对象实例[或

$index

]进行跟踪。如果以后重新加载数据，

ngRepeat

将不必为已呈现的项重新构建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这将显著提高渲染性能

---

谢谢你的回复，但这仍然不起作用，我想这是我第一次尝试。在这种情况下，数据仍然没有显示在我的表中。感谢回复，但这仍然不起作用。我认为这种方法是我第一次尝试。在这种情况下，数据仍然没有显示在我的表中。项目是否在没有过滤器的情况下显示？很好的一点，我现在就尝试，但是没有，它们没有显示。如果我使用JSON.parse将其转换为object，则会显示它们。显示的项目是否没有过滤器？很好，我现在就尝试，但没有，它们不会显示。如果我使用JSON.parse将其转换为对象，则会显示它们。