AngularJS - разбиение ng-repeat на несколько элементов HTML
Это третий вопрос, который я опубликовал сегодня, поэтому простите меня, но я просто сталкиваюсь с вещами, которые, как мне кажется, не могут понять.
Вот мой код для 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>
Вот что возвращается:
![введите описание изображения здесь]()
Но мне нужно, чтобы это выглядело так:
![введите описание изображения здесь]()
Как я могу разделить ng-repeat и позволить мне отделять значения (если я говорю это правильно), которые подаются.
Спасибо!
Ответы
Ответ 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>
Ответ 2
Если я хорошо понимаю, что вы правильно задаете вопрос, вам просто нужно применить ng-repeat
"выше" в своем html: вы хотите получить либо "список" для каждого автомобиля (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>
, но это действительно деталь.