Is there a way to print each item that matches the index of the first loop as an li element with different classes?
For instance, having li elements with classes like cat1_li, cat2_li, cat3_li for each respective loop iteration.
I'm struggling with nesting ng-repeats inside each other and can't figure out why all items are being printed in separate lists. It's clear that multiple lists are being created, but I'm unsure how to fix this issue.
If anyone could offer some insight or take a look at my code, I would greatly appreciate it.
Here is the HTML:
<div>
<ul class="tasks" ng-repeat="cat in taskCategories.categories">
{{ cat }}
<li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ index + 1 }}_li">
<span>
<span class="panel_title">
{{ tasks.title }}
</span>
</span>
</li>
</ul>
</div
Object:
app.controller('MainController', ['$scope', function($scope) {
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning',
'lifting'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}, {
title: '400 lbs',
category: 'lifting'
}
]
};
}]);