Just diving into the world of angular and struggling with implementing a 'live search' functionality. I've stored my JSON data as a variable in a JavaScript file and successfully displayed it in the HTML. I also have a 'list' radio button that changes the display size, working like a charm. However, things get tricky when I try to access the reverse filter option using another radio button. The goal is to filter the book titles in reverse order by their names, but nothing seems to happen. If you want to take a look at the JSON structure, you can find it here. Below is the code snippet where I attempt to perform the reverse filter action:
<div class="container result">
<div ng-class="list ? 'col-md-6' : 'col-md-4'" class="books" ng-repeat="books in books | filter:search | orderBy:'books.doc.name':reverse"> <a href="https://address/{{books.doc.name}}" target="_blank">
<img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{books.doc.thumbnail_590_url}}" alt="Click to read {{books.doc.name}}" title="Click to read {{books.doc.name}}" class="img-thumbnail" /></a>
<h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{books.doc.name}}</h4>
</div>
And here's the JavaScript:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller("Example", function($scope, $interval) {
$scope.search = "orig";
$scope.books = books;
$scope.reverse = false;
$scope.list = false;
});