AngularJS - разбиение ng-repeat на несколько элементов HTML

Это третий вопрос, который я опубликовал сегодня, поэтому простите меня, но я просто сталкиваюсь с вещами, которые, как мне кажется, не могут понять.

Вот мой код для angular:

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

И некоторые простые урезанные 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>

Вот что возвращается:

Но мне нужно, чтобы это выглядело так:

Как я могу разделить ng-repeat и позволить мне отделять значения (если я говорю это правильно), которые подаются.

Спасибо!

Ответ 1

Переместите ng-repeat до <ul>. Таким образом, у вас есть отдельный <ul> для каждого task в вашем списке mainTask.Tasks.

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

Ответ 2

Если я хорошо понимаю, что вы правильно задаете вопрос, вам просто нужно применить ng-repeat "выше" в своем html: вы хотите получить либо "список" для каждого автомобиля (1), либо "элемент" для каждой машины (2).

(1):

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

<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) немного лучше, потому что семантически вы показываете список автомобилей, поэтому вся информация о машине должна быть в элементе <li>, но это действительно деталь.