Doubt with ng-repeat Angularjs

Asked

Viewed 29 times

0

I have an array of objects, which within it has another array of objects. Follows:` 

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

For display of these items, I am using ng-repeat as below:

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

In the view, you’re only displaying 1 submenu item, as if you weren’t looping the second ng-repeat. It is correct and works to use ng-repeat within ng-repeat?

angularjs

1 answer

0

Brother good afternoon, apparently functioning as expected.

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>

Browser other questions tagged angularjs

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