0

possuo um array de objetos, que dentro dele tem outro array de objetos. Segue:`

$scope.menu = [{
    titulo: 'Comercial',
    submenus: [{ nome: 'Clientes', url: 'url/clientes' },{ nome: 'Proposta', url: 'url/proposta' }]
},
{
    titulo: 'Frota',
    submenus: [{ nome: 'Veiculos', url: 'url/veiculos' },{ nome: 'Ocupacao', url: 'url/ocupacao' }]
},
    {
        titulo: 'Logistica',
        submenus: [{ nome: 'Agente de Serviço', url: 'url/agente' },{ nome: 'Proposta', url: 'url/propostaLogistica' }]
    }
];

Para exibição destes itens, estou usando ng-repeat conforme abaixo:

<ul class="wraplist">
  <li class="menu-cor-lateral" ng-repeat="item in menu">
    <a href="javascript:;">
      <i class="fa fa-sitemap"></i>
      <span class="title">{{item.titulo}}</span>
      <span class="arrow"></span>
    </a>
    <ul class="sub-menu" ng-repeat="sub in item.submenus">
      <li>
        <a href="{{sub.url}}"><img src="assets/images/icon-submenu-shiftmc_1.png" />{{sub.nome}}</a>
      </li>
    </ul>
  </li>
</ul>

Na view, só está exibindo 1 item de submenu, como se não fizesse o looping do segundo ng-repeat. É correto e funciona utilizar ng-repeat dentro de ng-repeat?

1 Resposta 1

0

Brother boa tarde, aparentemente funcionando como esperado.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.menu = [{
      titulo: 'Comercial',
      submenus: [{
        nome: 'Clientes',
        url: 'url/clientes'
      }, {
        nome: 'Proposta',
        url: 'url/proposta'
      }]
    },
    {
      titulo: 'Frota',
      submenus: [{
        nome: 'Veiculos',
        url: 'url/veiculos'
      }, {
        nome: 'Ocupacao',
        url: 'url/ocupacao'
      }]
    },
    {
      titulo: 'Logistica',
      submenus: [{
        nome: 'Agente de Serviço',
        url: 'url/agente'
      }, {
        nome: 'Proposta',
        url: 'url/propostaLogistica'
      }]
    }
  ];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <ul class="wraplist">

    <li class="menu-cor-lateral" ng-repeat="item in menu">
      <a href="javascript:;">
        <i class="fa fa-sitemap"></i>
        <span class="title">{{item.titulo}}</span>
        <span class="arrow"></span>
      </a>
      <ul class="sub-menu" ng-repeat="sub in item.submenus">
        <li>
          <a href="{{sub.url}}">{{sub.nome}}</a>
        </li>
      </ul>
    </li>
  </ul>

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 .