ng-repeat in an array within an array of objects

Asked

Viewed 4,762 times

1

I’m trying to list all the sizes of my products once, e.g.: 38, 39, 40, 41 based on the sizes of my array, to set up a filter bar.

$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"]
    }]

But when I try to do the following, nothing appears on the list.

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

2 answers

2

Must be accessed the objeto contained in the list to then access the array of sizes.

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>

2


Well, you have such an object: objeto.propriedade.valor. But you want to access it like this objeto.valor. It’s not gonna work!

You have to do objeto.propriedade, then the value will be returned.

So it worked out for me:

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

Browser other questions tagged angularjs

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