angularJS - 将ng-repeat拆分为多个HTML元素

Question

这是我今天发布的第三个问题，原谅我，但我只是遇到了我无法理解的事情。

这是我的角度代码：

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并允许我将正在输入的值（如果我说的那么正确）分开。

谢谢！

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

Answer 2

如果我理解你的问题很好，你只需要在你的html中应用ng-repeat“更高”：你想在这里获得每辆车的“列表”（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>元素中，但这确实是一个细节。