自定义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; 
    }