Specific doubt using non-angular ng-repeat

Navigation
3

I'm using AngularJS in a project where I need to display a list of photos of products registered in the system and my html looks 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>

but% header-products should only be displayed if at least one product in my list has a photo, if it does not have any photos, it does not display this div . In the list will always have the name of the products but you can not have the photo: 

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

How can I do this if my header is out of header ?

    
asked by anonymous 18.09.2017 / 21:45

1 answer

3

Put the ng-show directive 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 will not, because, products has elements to display and aliments does not. 

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><scriptsrc="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 issue of the question you had an item that was not mentioned that only appears to header if some of the products items contain photo , then do a function that will scroll through that list and fetch the first image item, 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><scriptsrc="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

18.09.2017 / 21:47
Login with permission levels [duplicate] Dynamic slot value