How do I update a list of items based on a set of selected tags using AngularJS?

Question

I have a simple navigation control in my app that has a list of checkboxes, each representing a tag, and a list of items, each having one or more tags associated with it. When one or more tags are checked, the items that have those tags should be displayed.

I have two datasets, one listing a set of tags for every item, and one listing a set of items for every tag.

So far, my code looks like this:

HTML:

<div id="tag-selector" ng-controller="tagSelectorController">
   <label ng-repeat="tag in tags" style="display:block;">
      <input type="checkbox" ng-model="tag.selected"/>
       {{tag.name}}
      </label>
 </div>
 <hr>
 <div id="item-selector" ng-controller="tagSelectorController">
   <div ng-repeat="item in items" ng-show="(item.name | tagFilter:this.selection)">
       {{item.name}}
   </div>
 </div>

JS:

var app = angular.module("tagSelectorApp", []);

app.filter("tagFilter", function () {
           return function (input, selection) {
                    for (var tag in selection) {
                       if (selection[tag].items.indexOf(input) > -1) {
                          return true;
                       }
                    }
                    return false;
                  }
           });

app.controller("tagSelectorController", [
  "$scope",   
  tagSelectorController = function($scope) {
      $scope.tags = [{"name": "tag1",
                      "items": ["item1", "item3"],
                      "selected": true
                      },
                     {"name": "tag2",
                      "items": ["item1", "item2"],
                      "selected": false
                      },
                     {"name": "tag3",
                      "items": ["item3", "item1"],
                      "selected": true
                      }
                    ];

       $scope.items = [{"name": "item1",
                      "tags": ["tag1", "tag2", "tag3"]
                      },
                     {"name": "item2",
                      "tags": ["tag2"]
                      },
                     {"name": "item3",
                      "tags": ["tag1", "tag3"]
                      }
                    ];
      $scope.selection = [];
      $scope.$watch("tags | filter:{selected:true}", 
                    function (selectedTags) {
                        $scope.selection = selectedTags;
                    },
                    true);
   }
]);

angular.bootstrap(angular.element(document.getElementById("tag-selector")), ["tagSelectorApp"]);
angular.bootstrap(angular.element(document.getElementById("item-selector")), ["tagSelectorApp"]);

The problem I am having is this: while the item list correctly reflects the initial tag selection state, it does not change on subsequent checks/unchecks of the checkboxes. I was under the impression that every time I check a checkbox, the scope gets modified, and the item list gets refiltered, but that doesn't appear to be the case.

What am I missing?

Here's the above code in a jsfiddle: http://jsfiddle.net/2Vb2z/1/

Answer 1

Correct your tagFilter like this:

app.filter("tagFilter", function () {
    return function (input, selection) {
        var filterItems = [];
        for (var i=0;i< input.length;i++){
             for (var tag in selection) {
                 if (selection[tag].items.indexOf(input[i].name) > -1) {
                      filterItems.push(input[i]);
                      break;   
                 }
             }
        }
         return filterItems;
     }
});

Modify your HTML to use only 1 controller so that you can share your selection:

<div id="tag-selector" ng-controller="tagSelectorController">
  <label ng-repeat="tag in tags" style="display:block;">
     <input type="checkbox" ng-model="tag.selected"/>
     {{tag.name}}
  </label>
<hr>

  <div ng-repeat="item in items | tagFilter:selection"> //change expression to tagFilter:selection
     {{item.name}}
  </div>
</div>

DEMO

If you need to use ng-show to display the items, try this:

<div ng-repeat="item in items" ng-show="isShown(item)">

Add this function to your scope:

$scope.isShown = function(item){
          for (var tag in $scope.selection) {
                 if ($scope.selection[tag].items.indexOf(item.name) > -1) {
                      return true;
                 }
             }
          return false;
      }

DEMO