Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularJS - splitting up ng-repeat into multiple HTML elements

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:

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

enter image description here

But I need it to look like this:

enter image description here

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.

Thanks!

like image 444
agon024 Avatar asked Jul 25 '16 20:07

agon024


1 Answers

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

<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>
like image 60
Andrew Mairose Avatar answered Oct 03 '22 20:10

Andrew Mairose