1

Estou tentando listar todos os tamanhos dos meus produtos uma única vez, ex.: 38, 39, 40, 41 com base nos tamanhos do meu array, para assim montar uma barra de filtros.

$scope.listaProdutos = [
    {
        id: 1,
        nome: "Lorem ipsum dolor 1",
        preco: 129.90,
        foto: "img/produto-1.png",
        tamanhos: ["34", "35", "36", "38"]
    }, {
        id: 2,
        nome: "Lorem ipsum dolor 2",
        preco: 139.90,
        foto: "img/produto-2.png",
        tamanhos: [, "35", "38"]
    }]

Porém quando tento fazer o seguinte, nada aparece na lista.

            <div ng-repeat="tamanho in listaProdutos.tamanhos">
                    {{tamanho}}
                </div>
            </div>

2 Respostas 2

2

Bem, você tem um objeto assim: objeto.propriedade.valor. Mas você quer acessar assim objeto.valor. Não vai dar certo!

Você tem que fazer objeto.propriedade, então, será retornado o valor.

Assim deu certo pra mim:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="demo">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body ng-controller="con">
        <div ng-repeat="objeto in listaProdutos">
            {{objeto.nome + ': ' + objeto.tamanhos}}
        </div>
        <!-- RESULTADO
            Lorem ipsum dolor 1: 34,35,36,38
            Lorem ipsum dolor 2: ,35,38
        -->
        <script src="js/libs/angular.js/angular.js" type="text/javascript"></script>
        <script>
                $app = angular.module('demo', []);
                $app.controller('con', ['$scope', function ($scope) {
                        $scope.listaProdutos = [
                            {
                                id: 1,
                                nome: "Lorem ipsum dolor 1",
                                preco: 129.90,
                                foto: "img/produto-1.png",
                                tamanhos: ["34", "35", "36", "38"]
                            }, {
                                id: 2,
                                nome: "Lorem ipsum dolor 2",
                                preco: 139.90,
                                foto: "img/produto-2.png",
                                tamanhos: [, "35", "38"]
                            }];
                    }]);

        </script>
    </body>
</html>

2

Precisa ser acessado o objeto contida na lista para depois acessar o array de tamanhos.

var app = angular.module('app', []);
app.controller('ctrl', ['$scope',
  function($scope) {
    $scope.listaProdutos = [{
      id: 1,
      nome: "Lorem ipsum dolor 1",
      preco: 129.90,
      foto: "img/produto-1.png",
      tamanhos: ["34", "35", "36", "38"]
    }, {
      id: 2,
      nome: "Lorem ipsum dolor 2",
      preco: 139.90,
      foto: "img/produto-2.png",
      tamanhos: ["40", "35", "38"]
    }];

  }
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="items in listaProdutos">
    <div>
      {{items.id}} {{items.nome}} {{items.preco}}
    </div>
    Tamanhos: 
    <span ng-repeat="tamanho in items.tamanhos">
      {{tamanho}}
    </span>    
    <hr />
  </div>  
</div>

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 .