Question

我想使用angularJS在我的HTML页面中只显示三个项目。

我的代码：

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

Answer 1

您的代码无效，因为您的if语句不会被评估。

您可以使用limitTo过滤器。

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

Answer 2

与其他答案相同，但您可以使用ng-if指令而不是if语句，如果条件不为真，则会从DOM中删除元素。

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

循环ng-repeat中的条件

2 个答案: