list filtering; testing way behind now

app/js/controllers/loadCtrl.js

@@ -6,4 +6,8 @@ angular.module('kinghunt.controllers').
     controller('LoadCtrl', ['$scope', 'bookSvc', function($scope, bookSvc) {
       $scope.book = bookSvc.getBook();
       $scope.solved = bookSvc.getSolved();
+
+      $scope.hideProblem = function(problem) {
+        return $scope.skipSolved && $scope.solved[problem.id];
+      };
     }]);

app/js/directives/skipSolvedProblems.js

@@ -7,6 +7,14 @@ angular.module('kinghunt.directives').
       return {
         restrict: 'C',
         replace: false,
-        template: '<button class="btn btn-default" ng-click="bookSvc.toggleSkipSolved()">{{ bookSvc.getSkipSolved() | solvedMsg }} solved</button>',
+        link: function(scope, element, attrs) {
+          scope.skipSolved = bookSvc.getSkipSolved();
+
+          element.on('click', function(e) {
+            bookSvc.toggleSkipSolved();
+            scope.skipSolved = bookSvc.getSkipSolved();
+            scope.$apply();
+          });
+        }
       }
     }]);

app/js/filters/filters.js

@@ -26,7 +26,7 @@ angular.module('kinghunt.filters', []).
   filter('solvedMsg', function() {
     return function(skip) {
       return skip ? "Show" : "Hide";
-    }
+    };
   }).
   filter('translateStipulation', [function() {
     var mateInRx = /^#(\d+)$/;

app/partials/load.html

@@ -5,11 +5,13 @@ <h3>Enter a FEN:</h3>
 </div>
 -->
 <div id="problem-book">
-    <div class="skipSolvedProblems pull-right"></div>
+    <div class="pull-right">
+      <button class="btn btn-default skipSolvedProblems">{{ skipSolved | solvedMsg }} solved</button>
+    </div>
     <h3>KingHunt</h3>
     <p><em>{{book.title}}</em>, {{book.year}}</p>
     <ul class="list-group">
-      <li class="list-group-item problem-list" ng-repeat="problem in book.problems | filter:bookSvc.isSolved(problem.id)">
+      <li class="list-group-item problem-list" ng-repeat="problem in book.problems" ng-hide="hideProblem(problem)">
         <button class="solvedMark"></button>
         <a href="#/board/{{problem.id}}">
           <div class="stipulation">#{{ problem.id }}: {{ problem.fen | whoseTurn }} to play and {{problem.stipulation | translateStipulation }}</div>

config/karma.conf.js

@@ -19,7 +19,7 @@ module.exports = function(config) {
       'test/unit/**/*.js'
     ],
     autoWatch: true,
-    browsers: ['Firefox', 'Chrome'],
+    browsers: ['PhantomJS', 'Firefox', 'Chrome'],
     junitReporter: {
       outputFile: 'test_out/unit.xml',
       suite: 'unit'

package.json

@@ -18,6 +18,7 @@
     "grunt-contrib-jasmine": "~0.5.1",
     "grunt-contrib-compress": "~0.5.2",
     "grunt-contrib-jshint": "~0.1.1",
-    "grunt-contrib-uglify": "~0.2.2"
+    "grunt-contrib-uglify": "~0.2.2",
+    "karma": "~0.10.4"
   }
 }

test/unit/services/servicesSpec.js

@@ -138,7 +138,7 @@ describe('service', function() {
       });
 
       expect(gameSvc.getStatus instanceof Function).toBe(true);
-      
+
       describe('getStatus', function() {
         it("returns a status object", function() {
           var goalMoves = 2;