Specific doubt using ng-repeat at angular

Question

I am using Angularjs in a project where I need to display a list of photos of products registered in the system and my html is like this:

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

however the div header-products should only be displayed if at least one products from my list has photo, if there is no photo I do not display this header. In the list will always have the name of the products but can s er that does not have the photo:

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

How can I do that if mine header this outside the ng-repeat?

Answer 1

Set the directive ng-show asking if the list of products is greater than zero, example:

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

Below is a functional example, where the div with the title Products will appear, while the div with the title Food no, because, products has elements to present and aliments nay.

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>

---

With the new edition of the question had an item that was not mentioned that only appears to header if some of the items from products contain photo, then make a function that will go through this list and fetch the first item with image, example:

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>

_Reference

• ngShow
• Angularjs - Understanding the directives ng-show and ng-Hide