How to show element once in ng-repeat


I need to loop through a list order by price and as soon as the price is not there then I show a message with unavailable but I don't want to show it for each empty element. I'm using angular 1.2

<div ng-repeat="item in list | orderBy: 'cost'">

  <div ng-if="cost == 0 and not already shown">Sorry the following are unavailable</div>
  <div> item here...</div>
Problem courtesy of: matthewdaniel


Here is the best way I could find to get it done.


<div class="sold-out-message" ng-if="displaySoldOutMessage(item)">Sorry, sold out</div>


$scope.firstSoldOutItemId = false;
$scope.displaySoldOutMessage = function(item) {
   if ( item.cost ) return false;

   $scope.firstSoldOutItemId = $scope.firstSoldOutItemId ||;

   return == $scope.firstSoldOutItemId;
Solution courtesy of: matthewdaniel


You can try to use $scope.$whatch with a boolean variable like this:

   <div ng-model="actualItem" ng-repeat="item in list | orderBy: 'cost'">
             <div ng-if="cost == 0 && oneMessage == true">Sorry the following are unavailable</div>
                  <div> item here...</div>

And in your controller you look at actualItem :

      $scope.oneMessage = false;
      var cpt = 0; // if 1 so you stop to send message
    if(value.cost == 0 && $scope.oneMessage == false && cpt < 1) 
      // i don't know what is your cost but value is your actual item 
       $scope.oneMessage = true;
    else if($scope.oneMessage == true)
         $scope.oneMessage == false;

I am not sure about this but you can try it. It's certainly not the best way.

Discussion courtesy of: carton

You can show only the first message see here :

<div ng-repeat="item in list | orderBy: 'cost'">
    <div style="color:red" ng-show="item.cost == 0 && $first">Message Goes Here</div>
    <div>{{}} - Price : {{item.cost}}</div>

and here is a plunker for it :

also the ng-if you are using it wrong you need to do it like this item.cost for the next time

Cheers !

Discussion courtesy of: Moe Shaaban

You can conditionally display two spans - one if it's 0 (your 'not available' message) and another for anything else.

  <li ng-repeat="d in newData track by $index">
    <span ng-show="d > 0">{{d}}</span>
    <span ng-show="d === 0">Not Available</span>

The data can be passed through a function to pull all the 0 after the first one:

  $ = [1,2,3,0,1,0,0,1,0,2]
  $scope.pullDupes = function(array) {
    var newArray = [];
    var zero;
    for(var i = 0; i < array.length; i++) {
      if (array[i] !== 0) {
      if (array[i] === 0 && !zero) {
        zero = true;
    return newArray;
  $scope.newData = $scope.pullDupes($;


Discussion courtesy of: tpie

This recipe can be found in it's original form on Stack Over Flow.