AngularJS: Facets in a Search Grid

    Sometime back I really needed this code however it came a little too late and unfortunately didn't make it into the final product. However I have since then built a complete explain showing how to hand facets with little javascript code and with a whole lot of functionality!

Load appropriate facets, make a search. Update the UI, reload page if necessary but scale up for a single page application. Make things bookmarkable but don't lose that awesomeness from SPA's.

Example - I forget where I found this but its probably buried somewhere in my resources.

My Example

Javascript code
var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
  $scope.items = [{
          flag: true
        }, {
          flag: true
        }, {
          flag: false 
  $scope.itemsUnchanged = angular.copy($scope.items);
  $scope.allNeedsClicked = function () {
      var newValue = !$scope.allNeedsMet();
      for (var i = 0; i < $scope.items.length; i++) {
          $scope.items[i].flag = newValue;

  $scope.allNeedsMet = function () {
      var needsMet = [];
      for (var i = 0; i < $scope.items.length; i++) {
          if ($scope.items[i].flag === true)
      return (needsMet.length === $scope.items.length);
  $scope.update = function() {
      if (angular.equals($scope.items, $scope.itemsUnchanged)) {
          return "Not Changed";
      } else {
          return "Changed";
  $scope.url = function(){
    var url = [];
    //url = $scope.items[1].item;
    angular.forEach($scope.items, function(key, value) {
    return url.toString();
Html Code
    <h1>Catalog Facets</h1>
      <li><input type="checkbox" ng-click="allNeedsClicked()" ng-checked="allNeedsMet()"/>All
        <ul ng-repeat="i in items">
          <li><input type="checkbox" ng-model="i.flag"/>{{i.item}}</li>
    <label>Single value Url Query:</label>/?fq={{url()}}
    <label style="float:left">Multi value Url Query:/?</label>
    <div style="float:left" ng-repeat="i in items">
    <div ng-if="i.flag">fq={{i.item}}
            <span ng-if="items[$index+1].flag || items[$index+2].flag">&</span></div>
This is where I will implement the example but for now I have not included it yet.
It is mostly included and I only need to hookup the backend, however I'm working getting it live.

search - Multiple facets per field with Solr - Stack Overflow
Pretty URLs in AngularJS: Removing the # ♥ Scotch - used in the first example.
c# - URL with multiple parameters as a query string in ASP.NET - Stack Overflow
java - Handling multiple values for a single query parameter in a rest webservice url and handling them using hibernate criteria - Stack Overflow

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Editing Blogger Post on Github, Rough Draft

HTML5 Audio doesn't Autoplay for Chrome on Android