I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the array where the status is marked as "completed". Below is the snippet of code I am using:
<div class="span12" id="trainingWidget" ng-controller = "trainingInfo">
<div class="span3 pull-right">
<h4 class="theme-color">Available Courses</h4>
<table id="courseList">
<thead>
<tr>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in training | limitTo : 6">
<td>{{item.location}}</td>
<td>{{item.date}}</td>
</tr>
</tbody>
</table>
</div>
<div class="span3 pull-right">
<h4 class="theme-color">Your Last Course</h4>
<div id="courseStatus">
<p ng-repeat="item in training | limitTo: 1 | filter: {status: completed}">Was completed on <span id="recentTrainingDate">{{item.completionDate}}</span><br />
<span id="recentTrainingTitle">{{item.name}}</span></p>
<p class="theme-color">STATUS</p>
<p><i class="icon icon-ok"></i> Up To Date</p>
</div>
</div>
</div>
And here is the JSON data being used:
[
{
"location": "Cincinnati, OH",
"date": "Feb 18, 2016",
"name": "ABC Certification",
"status": "future",
"completionDate": ""
},
{
"location": "Houston, TX",
"date": "Mar 1-3, 2016",
"name": "123 Certification",
"status": "future",
"completionDate": ""
},
...
]
While I don't think it's necessary, here is a snippet of the controller code:
myBirkman.controller('trainingInfo', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
$http.get('assets/js/lib/angular/trainingData.json').success(function(data) {
$scope.training = data;
});
}]);
The first ng-repeat is working perfectly fine, but in the second repeat, I only want to display the first array item that has "completed" as the value of the "status" property. Thank you in advance for any assistance provided.