How to mount this ng-repeat?

Question

How to mount this ng-repeat?

Navigation

#1 by (0 votes)

0

I decided to organize the data into tabs. But I'm not able to do it using angularjs ng-repeat. I have the following json object for testing:

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

ng-repeat must be in the <li> tag to generate the tabs for each user request. But how to do the same with the "content" tab? I could not find a solution .. Anyone have any ideas?

javascript html angularjs

asked by anonymous 15.10.2016 / 02:47

1 answer

How to do automatic scrolling Where to put rotate Canvas in this code

score 0 · Accepted Answer

The variable r can not "exit" from <li> where it was set (unless you use ng-repeat-start and ng-repeat-end , but this is not the case here).

It is necessary to iterate twice, putting a ng-repeat on div that 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,usingthe angular-ui-bootstrap library, which automates the creation of these UI components interactive bootstrap.

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