angularJS - çoklu HTML öğelerine ng-tekrarlarak ayırma

Question

Bu, bugün gönderdiğim üçüncü soru oldu, bu yüzden beni affet ama ben anlamayacağım şeylere koşuyorum.

Ama gerekir:

İşte

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

olduğunu döndürür şudur:

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

Ve bazı basit soyunmuş HTML: Burada

benim açısal kodudur şuna benzemek için:

Ben ng tekrarı bölmek ve o beslenmesi sırasındaki (Birazdan söylüyorum ise) bana değerleri ayırmak için izin verir.

Teşekkür Nasıl

!

Answer 1

ng-repeat saatinizi <ul> numaralı telefona taşıyın. Bu şekilde, mainTask.Tasks listenizde her task için ayrı bir <ul> var.

<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

seni anlıyorum Eğer sadece ng-repeat "yüksek" senin html uygulamak gerekir, iyi soru: Her araç için sen olsun ya burada istiyoruz "listesini" (1) veya "bir eleman" için her araba (2).

(1) geçerli:

<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) geçerli:

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

semantik, belirli otomobil nedenle tüm bilgileri bir listesini gösteriyor, çünkü (2) biraz daha iyidir Bir araba, <li> öğesinde olmalıdır, ancak bu gerçekten bir ayrıntıdır.