I'm having a problem when trying to use the Smart Table with paging, filtering and searching in my table.
I was working with the table when converting a JSON that consumed a request to an object. In this case, I did:
$scope.estoque = JSON.parse(data.data);
The problem came when I needed to include paging, sorting, and searching. Then using the Smart Table, which until then had been serving me in what I needed.
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 the tutorial in Smart Table documentation, I created the table below:
<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 it's not showing any bug in the console, and also does not display the JSON data in my table. Can anyone tell me what I'm doing wrong?
AngularJS: 1.3
UPDATE
Ero answer was right, I just need to convert again my array for object, and then use ng-repeat. I'm still with Smart Table erro for filter (what doesn't work for object array), but I think it's plugin error and I will check on the github forum.
Because your ng-repeat is over a single <tr> you don't need to use ng-repeat-start and ng-repeat-end. The encapsulating <tr> tag will already repeat the inner HTML of it. Try taking out those tags and only using item to reference your current object. I changed the below HTML for you (it's untested!):
<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>