angularJS - Aufteilen von ng-repeat in mehrere HTML-Elemente

Question

Dies ist die dritte Frage, die ich heute gepostet habe, also verzeih mir, aber ich renne gerade in Dinge hinein, von denen ich nicht weiß, dass sie das herauszufinden scheinen.

Hier ist mein Code für Winkel:

angular.module('ngApp', []) 
.factory('authInterceptor', authInterceptor) 
.constant('API', 'http://appsdev.pccportal.com:8080/ecar/api') 
.controller('task', taskData) 

function taskData($scope, $http, API) { 
    $http.get(API + '/tasks'). 
    success(function(data) { 
    $scope.mainTask = data; 
    console.log(data); 
    }); 
} 

Und einige einfache abgespeckte HTML:

<ul> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>CAR ID:</strong> {{ task['CAR ID'] }} </li> 
     <br> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Title:</strong> {{task['Project Title']}} </li> 
     <br> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Amount:</strong> ${{task.Amount}} </li> 
     <br> 

     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Status:</strong> {{task.Status}} </li> 
    </ul> 

Hier ist, was das zurückgibt:

Aber ich brauche es so aussehen:

Wie kann ich ng-repeat aufgeteilt und erlauben Sie mir, die Werte zu trennen (wenn ich das richtig zu sagen bin), der in gefüttert werden.

Dank!

Answer 1

Verschieben Sie Ihre ng-repeat bis zur <ul>. Auf diese Weise haben Sie eine separate <ul> für jede task in Ihrer mainTask.Tasks Liste.

<ul ng-repeat="task in mainTask.Tasks"> 
    <li class="view1" > <strong>CAR ID:</strong> {{ task['CAR ID'] }} </li> 
    <br> 
    <li class="view1"> <strong>Title:</strong> {{task['Project Title']}} </li> 
    <br> 
    <li class="view1"> <strong>Amount:</strong> ${{task.Amount}} </li> 
    <br> 

    <li class="view1"> <strong>Status:</strong> {{task.Status}} </li> 
</ul> 

Answer 2

Wenn ich Sie verstehen Frage gut, das Sie sich bewerben müssen nur die ng-repeat „höher“ in Ihrem HTML: Sie hier wollen entweder bekommen „um eine Liste“ für jedes Fahrzeug (1) oder „ein Element“ für jedes Auto (2).

(1) ist:

<ul ng-repeat="task in mainTask.Tasks"> 
    <li class="view"><strong>CAR ID:</strong> {{ task['CAR ID'] }}</li> 
    <li class="view"> <strong>Title: </strong> {{task['Project Title']}} </li> 
    <li class="view"> <strong>Amount:</strong> ${{task.Amount}} </li> 
    <li class="view"> <strong>Status:</strong> {{task.Status}} </li> 
</ul> 

(2) ist:

<ul> 
    <li class="view" ng-repeat="task in mainTask.Tasks"> 
     <strong>CAR ID:</strong> {{ task['CAR ID'] }}<br> 
     <strong>Title:</strong> {{task['Project Title']}}<br> 
     <strong>Amount:</strong> ${{task.Amount}} <br> 
     <strong>Status:</strong> {{task.Status}} 
    </li> 
</ul> 

(2) ist ein bisschen besser, weil semantisch, führen Sie eine Liste von Autos, so die alle Informationen zeigt von Ein Auto sollte in einem <li> Element sein, aber das ist wirklich ein Detail.