0
I decided to organize the data in "tabs". But I’m not able to do it using ng-repeat from Angularjs. I have the following json object for tests:
var obj = {
URL_IMAGEM:"img/user.png",
CLIENTE:"BRUNO SILVA",
QTD_PEDIDOS:1,
PRIMEIRO_PEDIDO:"01/01/2016 12:00:00",
PEDIDOS:[
{
ENTREGA:{
RUA:'RUA TESTE',
BAIRRO:'BAIRRO TESTE',
NUMERO:10,
CIDADE:'CIDADE TESTE',
UF:'SP'
},
PRODUTOS:[
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
},
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
}
],
TOTAL:200,
TROCO_PARA:300,
TROCO:100,
OBS:'',
ID:1
},
{
ENTREGA:{
RUA:'RUA TESTE',
BAIRRO:'BAIRRO TESTE',
NUMERO:10,
CIDADE:'CIDADE TESTE',
UF:'SP'
},
PRODUTOS:[
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
},
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
},
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
},
{
URL_IMAGEM:'img/user.png',
PRODUTO:'PRODUTO TESTE',
QTD:10,
VALOR:20,
TOTAL:200
}
],
TOTAL:200,
TROCO_PARA:300,
TROCO:100,
OBS:'',
ID:2
}
]
};
And I have the following html (body):
<ul class="nav nav-tabs">
<li ng-class="$index == 0 ? 'active' : ''" ng-repeat="r in vm.request_pending.PEDIDOS track by $index">
<a data-toggle="tab" data-target="#{{r.ID}}">#{{r.ID}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="{{r.ID}}">
<h4>Produtos</h4>
<div class="table table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th style="text-align: center" class="tt">#</th>
<th>Imagem</th>
<th>Produto</th>
<th>Qtd</th>
<th>Valor</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in r.PRODUTOS">
<td style="text-align: center" ng-bind="$index+1"></td>
<td>
<img src="{{p.URL_IMAGEM}}">
</td>
<td ng-bind="p.PRODUTO"></td>
<td ng-bind="p.QTD"></td>
<td ng-bind="p.VALOR | currency"></td>
<td ng-bind="p.TOTAL | currency"></td>
</tr>
</tbody>
</table>
</div> <!-- table -->
<h4>Entrega</h4>
<div class="row">
<div class="col-md-12">
<label class="label">Rua</label>
<input type="text"
class="form-control"
ng-model="r.ENTREGA.RUA"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
</div> <!--row-->
<div class="row">
<div class="col-md-10">
<label class="label">Bairro</label>
<input type="text"
class="form-control"
ng-model="r.ENTREGA.BAIRRO"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
<div class="col-md-2">
<label class="label">Número</label>
<input type="text"
class="form-control"
ng-model="r.ENTREGA.NUMERO"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
</div> <!--row-->
<div class="row">
<div class="col-md-10">
<label class="label">Cidade</label>
<input type="text"
class="form-control"
ng-model="r.ENTREGA.CIDADE"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
<div class="col-md-2">
<label class="label">UF</label>
<input type="text"
class="form-control"
ng-model="r.ENTREGA.UF"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
</div> <!--row-->
<h4>Detalhes</h4>
<div class="row">
<div class="col-md-4">
<label class="label">Total</label>
<input type="text"
class="form-control"
ng-model="r.TOTAL | currency"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
<div class="col-md-4">
<label class="label">Troco para</label>
<input type="text"
class="form-control"
ng-model="r.TROCO_PARA | currency"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
<div class="col-md-4">
<label class="label">Troco</label>
<input type="text"
class="form-control"
ng-model="r.TROCO | currency"
placeholder=""
style="margin-bottom:4px;"
ng-disabled="true">
</div> <!--col-->
</div> <!--row-->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Observações</label>
<textarea class="form-control" rows="5" ng-model="r.OBS"
ng-disabled="true"></textarea>
</div>
</div> <!--col-->
</div> <!--row-->
<div class="pull-right">
<button type="button" class="btn btn-success" ng-click="">Finalizar Pedido</button>
<button type="button" class="btn btn-danger" ng-click="">Cancelar Pedido</button>
</div>
</div> <!-- tab-pane -->
</div> <!-- tab-content -->
We need ng-repeat to tag <li>
to generate tabs for each user request.
But how to do the same with the "content" of the tab?
I couldn’t find a solution.
Does anyone have any idea?
But if I do so, the content of all orders will be displayed on the same tab, not just the content of the tab selected. That’s not gonna work..
– Angular Man
@Angularman Truth: ng-repeat has to stay in the div
tab-pane
.– andref
thanks for your attention and help.. Using angular-ui-bootstrap solved the problem, I had already read about this library but postponed the implementation, now it’s time..
– Angular Man