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个孩子，他们的班级应该是＆＃39; line＆＃39; ＆安培;在每四个项目之后，您要插入一个div，其类为＆＃39; space-10＆＃39;。这可以通过使用ng-if＆amp;通过检查$ index是否为4的倍数。

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

对于格式编号，Angular js提供number过滤器。

HTML代码：

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

使用AngularJs自定义ng-repeat

1 个答案: