angularJS

Question

这是我今天发布的第三个问题，所以请原谅我，但我只是运行陷入了我似乎无法弄清楚的事情中。

这是我的 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>

这是 returns:

但我需要它看起来像这样：

我如何拆分 ng-repeat 并允许我分隔输入的值（如果我说得对）。

谢谢！

Answer 1

将您的 ng-repeat 移至 <ul>。这样，您的 mainTask.Tasks 列表中的每个 task 都有一个单独的 <ul>。

<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 "higher" ：你想要在这里为每辆车获得 "a list" (1) 或 "an element" 每辆车 (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> 元素中，但这确实是一个细节。

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

angularJS - splitting up ng-repeat into multiple HTML elements

javascript

jquery

ng-repeat

angularjs-ng-repeat