ng-repeat in an array within an array of objects

Question

ng-repeat in an array within an array of objects

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I'm trying to list all of my product sizes once, eg 38, 39, 40, 41 based on the sizes of my array, to mount 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 in the list.

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

angularjs

asked by anonymous 07.01.2017 / 04:30

2 answers

2

It needs to be accessed the objeto contained in the list and 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><scriptsrc="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>

07.01.2017 / 14:18

Short does not recognize whole date Ajax does not recognize the echo of PHP [closed]

score 2 · Accepted Answer

Well, you have an object like this: objeto.propriedade.valor . But you want to access objeto.valor . It will not work!

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

So it worked 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>