javascript – angularJS – 将多个HTML元素分割为重复

这是我今天发布的第三个问题,原谅我,但我刚刚遇到了我似乎无法想象的事情.

这是我的代码：

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重复,并允许我分离正在加入的值(如果我说的话).

谢谢！

解决方法

将您的ng重复移至< ul>.这样,你有一个单独的< ul>为您的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>