3

Estou usando AngularJS em um projeto onde preciso exibir uma lista de fotos de produtos cadastrados no sistema e meu html está assim:

// Titulo para a área de produtos
<div class="header-products">
  <h3>Produtos</h3>
</div>

// Ng-repeat para listar os produtos, somente serão exibidos produtos com foto
<div class="photo" ng-repeat="product in products | limitTo: 3" ng-if="product.imageUrl">
  <img ng-src="{{ product.imageUrl }}" alt="{{ product.name }}" 
      title="{{ product.name }}" ng-if="product.imageUrl" />
</div>

porém a div header-products só deve ser exibida se pelo menos um produtos da minha lista tiver foto, se não tiver nenhuma foto não exibo este header. Na lista sempre terá o nome do produtos mas pode s er que nao tenha a foto:

[
 {produto: 'lapis', imageUrl: 'url-da-imagem'},
 {produto: 'caneta', imageUrl: 'url-da-imagem'},
 {produto: 'borracha', imageUrl: ''}
]

Como posso fazer isso se meu header esta fora do ng-repeat?

1
  • Olá Felipe, você já tentou utilizar o ng-if? Algo como: <div ng-if="checked"></div>
    – Emanoel
    18/09/2017 às 19:49

1 Resposta 1

3

Coloque a diretiva ng-show perguntando se a lista de products é maior do que zero, exemplo:

<div ng-show="products.length > 0" class="header-products">
  <h3>Produtos</h3>
</div>

Abaixo um exemplo funcional, onde a div com o titulo Produtos vai aparecer, enquanto que a div com o titulo Alimentos não, porque, products tem elementos para apresentar e aliments não.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.products = [{
      'id': 1,
      'name': 'name1'
    },
    {
      'id': 2,
      'name': 'name2'
    },
  ];
  $scope.aliments = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app="app" ng-controller="ctrl">

  <div ng-show="products.length > 0" class="header-products">
    <h3>Produtos</h3>
  </div>


  <div ng-show="aliments.length > 0" class="header-products">
    <h3>Alimentos</h3>
  </div>

</div>


Com a nova edição da pergunta tinha um item que não foi mencionado que só aparece a header se alguns dos itens de products contiver foto, então faça uma função que vai percorrer essa lista e buscar o primeiro item com imagem, exemplo:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.products = [{
      produto: 'lapis',
      imageUrl: ''
    },
    {
      produto: 'caneta',
      imageUrl: ''
    },
    {
      produto: 'borracha',
      imageUrl: 'a'
    }
  ]
  $scope.showItem = function() {
    var sts = false;
    for (i = 0; i < $scope.products.length; i++) {
      if ($scope.products[i].imageUrl !== '') {
        sts = true;
        break;
      }
    }
    return sts;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app="app" ng-controller="ctrl">

  <div ng-show="showItem()" class="header-products">
    <h3>Produtos</h3>
  </div>

</div>

Referencia

4
  • Tem um detalhe que acabei não explicando. Minha lista é assim: [ {produto: 'lapis', imageUrl: 'url-da-imagem'}, {produto: 'caneta', imageUrl: 'url-da-imagem'}, {produto: 'borracha', imageUrl: 'url-da-imagem'} ] Porém pode ser que só um ou dois produtos tenham foto. Para exibir o titulo preciso verificar se pelo menos um dos itens tem foto senão não exibo nada. 18/09/2017 às 20:01
  • @FelipeCoelho mas, isso não muda nada na resposta veja, que até coloque dois exemplos, mas, diga ai o que aconteceu? se não deu certo, é melhor você editar a sua pergunta e colocar tudo que precisa.!
    – novic
    18/09/2017 às 20:03
  • Editei a perguntando. Valeu 18/09/2017 às 20:07
  • @FelipeCoelho editado a resposta
    – novic
    18/09/2017 às 20:17

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 .