angularJS -将ng重复分解成多个HTML元素。

This is the third question I have posted today so forgive me but I am just running into things I can't seem to figure out.

这是我今天发布的第三个问题，所以请原谅我，我只是遇到了一些我似乎弄不明白的事情。

Here is my code for 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);
  });
}

And some simple stripped down HTML:

还有一些简单的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>

Here is what that returns:

这是回报:

But I need it to look like this:

但是我需要它看起来像这样:

How can I split up ng-repeat and allow me to separate the values (if I'm saying that right) that are being fed in.

我如何分割ng-repeat，并允许我将正在输入的值(如果我说的是对的)分开。

Thanks!

谢谢!

2 个解决方案

#1

Move your ng-repeat up to the <ul>. This way, you have a separate <ul> for each task in your mainTask.Tasks list.

将ng-repeat向上移动到

<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

If I understand you question well, you just need to apply the ng-repeat "higher" in your html : You want here to either get "a list" for each car (1) or "an element" for each car (2).

如果我理解你的问题，你只需要在你的html中应用ng-repeat“higher”:你想在这里为每辆车获得“列表”(1)或“元素”(2)。

(1) is :

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

(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) is a bit better because semantically, you are showing a list of cars so all the info of a car should be in a <li> element, but that's really a detail.

(2)更好一点，因为从语义上来说，您显示的是一个汽车列表，所以汽车的所有信息都应该在

元素中，但这确实是一个细节。

元素中,但这确实是一个细节。

#1