Skip to main content
Snippets
Fonte Link
andref
  • 265
  • 1
  • 7

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.

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.

Corrigindo a resposta.
Fonte Link
andref
  • 265
  • 1
  • 7

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

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” ng-repeat="r in vm.request_pending.PEDIDOS">
    <!-- ... -->
</div>

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>
Fonte Link
andref
  • 265
  • 1
  • 7

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” ng-repeat="r in vm.request_pending.PEDIDOS">
    <!-- ... -->
</div>