CODEWITHSUNDEEP
angularjs
rochdi bouslama
rochdi bouslama

Reputation: 123

Condition in loop ng-repeat

I want to display only three items in my HTML page using angularJS.

My code:

<div class="col-xs-4" ng-repeat="idea in ideas | i in 2">
  if(i !== 2){
    <div class="tile p-5 m-b-10">
      <button target="_blank"  ng-click="showIdea(customer.Id,idea.Id)">
      <img class="w-100" src="design/img/projects/1.png" alt="">
      <small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
      </button>
      <div class="clearfix"></div>
    </div>
  }
</div>

Upvotes: 2

Views: 167

Answers (2)

shaunhusain
shaunhusain

Reputation: 19748

Same as the other answer but you can use ng-if directive instead of an if statement this will remove elements from the DOM if the condition isn't true.

<div class="col-xs-4" ng-repeat="idea in ideas | limitTo:3">
  <div class="tile p-5 m-b-10" ng-if="$index!==2">
    <button target="_blank"  ng-click="showIdea(customer.Id,idea.Id)">
      <img class="w-100" src="design/img/projects/1.png" alt="">
      <small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
    </button>
    <div class="clearfix"></div>
  </div>
</div>

Upvotes: 3

dting
dting

Reputation: 39307

Your code will not work because your if statement will not be evaluated.

You can use the limitTo filter.

<div class="col-xs-4" ng-repeat="idea in ideas | limitTo: 3">
  <div class="tile p-5 m-b-10">
    <button target="_blank"  ng-click="showIdea(customer.Id,idea.Id)">
      <img class="w-100" src="design/img/projects/1.png" alt="">
      <small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
    </button>
  <div class="clearfix"></div>
</div>

Upvotes: 5

Related Questions