I'm new to Angular JS and while I understand JavaScript in general, Angular has a different approach that is challenging for me. Specifically, I am struggling with sorting an array of objects by a property and filtering them based on a string provided by the model attached to an input field "query."
Everything seems to be working well until I encounter the issue of preserving the objects grouped by the "group" property when the array is filtered by a keyword entered in the input field.
<input ng-model='query' type='text'>
<div ng-repeat='reservation in reservations | filter: query | orderBy: "group"'>
<span as-reset-list='{{$last}}'></span>
<h2 ng-show='CreateHeader(reservation.group)'>Group</h2>
<div>Group: {{ reservation.group }} - ID: {{ reservation.id }}</div>
</div>
To display a header indicating the group, I have created a variable "currentGroup" in the $scope so that I can compare it with the current object's group within the loop.
function RestaurantCtrl($scope) {
$scope.restaurants = [/* data */];
$scope.currentGroup = '';
$scope.CreateHeader = function(group){
showHeader = (group!=$scope.currentGroup);
$scope.currentGroup = group;
return showHeader;
}
}
However, when I perform a search that returns no results and then do another search, it seems like the variable loses its value or something happens that causes the grouping not to work as expected.
How can I solve this issue? I've attempted creating a directive to reset the value of the "currentGroup" variable but it doesn't always work.
You can view a working example of my code here http://jsfiddle.net/5HZYt/