使用AngularJs自定义ng-repeat

Question

我想使用ng-repeat来显示我的结果，但是这个模板有点具体...

它使用如下的EJS来工作：

<% var i = 0; %>

<% vehicles.forEach(function(vehicle, index){ %>

<% if (i === 0) {%>
<div class="line">
<% } %>

<div class="col-3">
  <article>
    <img src="/uploads/<%-vehicle.thumbnail%>" alt="<%-vehicle.title%>">
    <h3><a href="/mes-vehicules/show/<%-vehicle.id%>"><%-vehicle.title%></a></h3>
    <p><%-shortText(vehicle.description, 50)%></p>
    <span><%-formatNumber(vehicle.priceTtc)%></span>
  </article>
</div>

<% if(i === 3) { %>
</div>
<div class="space-10"></div>
<% i = -1; %>
<% } %>

<% i++; %>

<% }); %>

使用AngularJS我想知道怎么做，我的代码不工作...

<div class="line" ng-if="$index%3 == 0">
  <div class="col-3">
    <article>
      <img src="/uploads/{{vehicle.thumbnail}}" alt="{{vehicle.title}}">
      <h3><a href="/mes-vehicules/show/{{vehicle.id}}">{{vehicle.title}}</a></h3>
      <p>{{vehicle.description | short}}</p>
      <span>{{vehicle.priceTtc | formatNumber}}</span>
    </article>
  </div>
</div ng-if="$index%3 == 0">

Answer 1

您似乎希望在一个div中有4个孩子，其类应该是“line”&在每四个项目之后，您想插入一个类为“space-10”的div。这可以通过使用ng-if来实现&通过检查$index是否是4的倍数。

为了显示最多50个字符，我们必须在控制器中创建一个shortText(desc,length)函数，该函数将返回简短的文本。

对于格式化数字，Angular js提供了number过滤器。

超文本标记语言代码：

  <div ng-repeat="vehicle in vehicles">
   <div class="line" ng-if="$index % 4 == 0">
      <div class="col-3"">
        <article>
          <img src="/uploads/{{vehicle.thumbnail}}" alt="{{vehicle.title}}">
          <h3><a href="/mes-vehicules/show/{{vehicle.id}}">{{vehicle.title}}</a></h3>
          <p>{{shortText(vehicle.description, 50)}}</p>
          <span>{{vehicle.priceTtc | number}}</span>
        </article>
      </div>
    <div class="space-10" ng-if="$index % 4 == 3"></div>
    </div>
</div>

控制器代码：

$scope.shortText= function(desc,length) {
             if(desc.length>length)
return desc.substr(0,length);
else
return desc;
  }