I am managing an array of tasks that each have titles and labels.
function Task(taskTitle, taskType) {
this.title = taskTitle;
this.type = taskType;
}
$scope.tasks = [];
As I create different tasks with various types and add them to the array.
In my HTML, I display a column of cards filtered by task type:
<div ng-model="tasks">
<div class="card" ng-repeat="abc in tasks track by $index" ng-show="abc.type==0">
<p> {{ abc.title }} </p>
</div>
</div>
I want to link the first displayed card in this filtered view to another div. Since I will be processing an inbox and removing cards from the list, I need the data to refresh each time a card is processed.
<div ng-model="firstCardInFilteredArray">
<h4>Title of first card:</h4>
<p> This should be the title of the first card! </p>
</div>
My initial thought was to use this pseudo-code (in JavaScript):
// pseudo-code!
$scope.inboxTasks = [];
for (i=0; i<tasks.length(); i++) {
if (tasks[i].type == 0) {
inboxTasks.append(tasks[i]);
}
}
and somehow trigger that function whenever the page changes. However, this approach seems impractical and goes against the Angular framework.
Is there a simple way in pure JavaScript or with Angular to achieve this conditional binding?