Benutzerdefinierte ng-repeat mit AngularJS

Question

Ich möchte ng-repeat verwenden, um meine Ergebnisse zu zeigen, aber die Vorlage ist ein wenig spezifisch ...

Es funktioniert EJS wie folgt aus:

<% 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++; %> 

<% }); %> 

mit AngularJS ich würde gerne wissen, wie zu tun ist, hat mein Code nicht ...

<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

Es scheint, Sie wollen 4 childs in einem div, dessen Klasse sollte ‚Linie‘ & mindestens alle vier Elemente, die Sie ein Div einfügen möchten, dessen Klasse "Space-10" ist. Dies ist möglich durch ng-if mit & durch Prüfen, ob $ index Vielfaches von 4

Für maximal 50 Zeichen angezeigt wird, haben wir eine shortText(desc,length)-Funktion in unserer Steuerung zu schaffen, die uns verkürzt Text zurück.

Für die Formatierungsnummer bietet Angular js number Filter.

HTML-Code:

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

Controller-Code:

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