自定義NG-重複AngularJs

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

看來你想要孩子的4一個格每四年後，它的類應該是「行」 &你想插入一個div的項目是'space-10'。這可以通過使用ng-if &通過檢查$指數是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; 
    }