0

Resolvi organizar os dados em "tabs". Mas não estou conseguindo fazer utilizando o ng-repeat do angularjs. Tenho o seguinte objeto json para testes:

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

E tenho o seguinte 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 -->

É preciso que o ng-repeat fique na tag <li> para que seja gerada as tabs de cada pedido do usuário. Mas como fazer o mesmo com o "content" da tab? Não consegui encontrar uma solução.. Alguém tem alguma ideia?

1 Resposta 1

0

A variável r não pode "sair" do <li> onde ela foi definida (a não ser que você use ng-repeat-start e ng-repeat-end, mas não é o caso aqui).

É necessário então iterar duas vezes, colocando um ng-repeat no div que tem o conteúdo da tab:

<div class="tab-content">
    <div class="tab-pane fade in active" id="{{r.ID}}" ng-repeat="r in vm.request_pending.PEDIDOS">
        <!-- ... -->
    </div>
</div>

Veja no snippet abaixo:

angular
  .module('app', [])
  .controller('AppController', AppController);

function AppController() {
  this.request_pending = obj;
}

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
  }]
};
<div ng-app="app" ng-controller="AppController as vm">

  <ul class="nav nav-tabs">
    <li ng-class="$index == 0 ? 'active' : ''" ng-repeat="r in vm.request_pending.PEDIDOS">
      <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}}" ng-repeat="r in vm.request_pending.PEDIDOS">
      <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>
      etc.
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Considere, porém, usar a biblioteca angular-ui-bootstrap, que automatiza a criação desses componentes de UI interativos do bootstrap.

Criei um snippet no plunker para você ver funcionando.

3
  • Mas se eu fizer assim, o conteúdo de todos os pedidos serão exibidos na mesma tab, e não somente o conteúdo da tab selecionada. Assim não vai funcionar.. Commented 15/10/2016 às 16:06
  • @AngularMan Verdade: o ng-repeat tem que ficar na div tab-pane.
    – andref
    Commented 17/10/2016 às 14:28
  • obrigado pela atenção e ajuda.. Utilizando o angular-ui-bootstrap resolveu o problema, já havia lido sobre essa biblioteca mas adiei a implementação, agora chegou a hora.. Commented 17/10/2016 às 19:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .