How to mount this ng-repeat?

Asked

Viewed 145 times

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?

javascript html angularjs

1 answer

0


The variable r cannot "leave" the <li> where it was set (unless you use ng-repeat-start and ng-repeat-end, but that’s not the case here).

It is then necessary to iterate twice by placing a ng-repeat in the div which has the contents of the 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>

See the snippet below:

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>

Consider, however, using the library angular-ui-bootstrap, that automates the creation of these interactive bootstrap UI components.

I created a snippet in the plunker for you to see working.

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

  • @Angularman Truth: ng-repeat has to stay in the div tab-pane.

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

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.