Screencast Video:
Javascript Source File: (located at the bottom)
Demonstration of the Issue:
I have been facing a persistent issue that I am struggling to resolve. My goal is to allow users to sort database results by clicking on radio buttons with specific filters.
Upon clicking a radio button, the console shows that the correct URL is fetched using AJAX, but unfortunately, the list does not update in the view.
The page functions correctly upon initial load (without any sorting filters applied).
The Controller:
FontGet.controller('mainController', ['$scope', 'FontService', '$location', '$rootScope', '$routeParams', function($scope, FontService, $location, $rootScope, $routeParams) {
$rootScope.hideFatMenu = false;
$scope.navCollapsed = true;
$scope.isSettingsCollapsed = true;
$rootScope.header = "Welcome to FontGet.com!";
$scope.sortBy = 'new';
$scope.fonts = {
total: 0,
per_page: 10,
current_page: ((typeof($routeParams.page) !== 'undefined') ? $routeParams.page : 1),
loading: true
};
$scope.setPage = function() {
FontService.call('fonts', { page: $scope.fonts.current_page, sort: $scope.sortBy }).then( function(data) {
$scope.fonts = data.data;
$scope.fonts.loading = false;
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
};
$scope.$watch("sortBy", function(value) {
$scope.setPage();
});
$scope.$watch("searchQuery", function(value) {
if (value) {
$location.path("/search/" + value);
}
});
$scope.categories = FontService.categories();
$scope.setPage();
}]);
The View Template:
<div class="fontdd" ng-repeat="font in fonts.data" >
<!-- Content goes here. This populates correctly upon initial page load -->
</div>
The Sorting Radio Buttons:
<ul class="radiobtns">
<li>
<div class="radio-btn">
<input type="radio" value="value-1" id="rc1" name="rc1" ng-model="sorts" ng-change="sortBy = 'popular'">
<label for="rc1" >Popularity</label>
</div>
</li>
<li>
<div class="radio-btn">
<input type="radio" value="value-2" id="rc2" name="rc1" ng-model="sorts" ng-change="sortBy = 'trending'">
<label for="rc2">Trending</label>
</div>
</li>
<li>
<div class="radio-btn">
<input type="radio" value="value-4" id="rc4" name="rc1" checked="checked" ng-model="sorts" ng-change="sortBy = 'new'">
<label for="rc4">Newest</label>
</div>
</li>
<li>
<div class="radio-btn">
<input type="radio" value="value-3" id="rc3" name="rc1" ng-model="sorts" ng-change="sortBy = 'alphabetical'">
<label for="rc3">Alphabetical</label>
</div>
</li>
</ul>
You may notice that the ng-model for the radio buttons is not assigned to sortBy. This decision was made to prevent the AJAX call from being triggered multiple times (which occurs when linked to sortBy).