ng-repeat by type using an associative array and ng-animate

Question

I am using ng-repeat, and showing the list by checking its type against an associative array on the scope. It appears the ng-repeat will animate when I use a search bar(searching the title) and a slider(searching an attribute on the item, or when a child div/directive is filtered(ultimately passed through this directive), but when I click the button to truthy/falsey a type on the associative array for the item, the css animations don't work.

What is the proper way to show/hide a 'type' of an item in a list using ng-repeat that will allow for animations to occur?

heres the HTML:

<!-- the list being animated when shown/hidden -->
<joke ng-repeat="individualJoke in allJokes | 
                                   filter:jokePCRange | //this filters by a property, and animates
                                   filter:search" 
      model="individualJoke"            // not sure if this is relevant for this SO?
      joke-filter="JokeTypeFilter"      // this doesnt work
      answer-filter="AnswerTypeFilter"  // this doesnt work either
      answer-range="answerPCRange"      // this filters a child div by a slider, and EVEN works
      class="joke-animation"            // this is the css animation class
      ng-class="jokeCssClasses(individualJoke.type)"></joke>

<!-- and here is the filter on the other part of the page, that when clicked,
     it will change the truthy/falsey of the associative array, and show/hide
     the list items above, but won't animate -->
  <div class="col-md-4" ng-repeat="uniqJokeType in uniqJokeTypes">
    <div ng-click="jokeTypeClick(uniqJokeType)">
      <label ng-bind="uniqJokeType"></label>
      <input type="checkbox" ng-model="uniqJokeType" hidden/>
    </div>
  </div>

Here is the controller, with the associative array:

$scope.JokeTypeFilter = {
  type1: true,  //should be shown
  type2: true,
  type3: false  //should be hidden
};
$scope.AnswerTypeFilter = {...}; //similar to above

// and when you click the filter button, it updates the truthy/falsey
$scope.jokeTypeClick = function($event){
  var uniqJoke = $event;
  $scope.JokeTypeFilter[uniqJoke] = !$scope.JokeTypeFilter[uniqJoke];
};
$scope.answerTypeClick = function($event){
  var uniqAnswer = $event;
  $scope.AnswerTypeFilter[uniqAnswer] = !$scope.AnswerTypeFilter[uniqAnswer];
};

About a month into angular, Wooot!

Things I have tried:

• moving ng-show="JokeTypeFilter[individualJoke.type]" to either the directive declaration in the HTML, or to the template
• changing the animation css for ng-show, but it still isnt working
• verified that the scope variables JokeTypeFilter and AnswerTypeFilter update on click

Answer 1

According to this site, there is a difference between ng-show and | filter:*:

Yes, there is a difference. When you use a filter, the non-matching items are removed from the array before ever drawing the view; when using ngShow, the non-matching items will still be drawn and all bindings still bound up, but it just won't be visible due to a "display: none" CSS property.

So I switched to using a custom Filter.

HTML:

<joke ng-repeat="individualJoke in allJokes 
                 | filter:jokePCRange
                 | orderBy:randomOrder
                 | filter:search
                 | JokeTypeRepeat:arrayOfViewableJokeTypes"  //here I add the Filter
                   model="individualJoke" 
                   answer-filter="AnswerTypeFilter" 
                   answer-range="answerPCRange" 
                   class="col-md-4 joke joke-animation"  
                   ng-class="jokeCssClasses(individualJoke.type)"></joke>

JS Controller:

angular.module('jsekoApp')
  .controller('MainController', [ '$scope', '$filter', 'JokeService', 'JokeTypeRepeatFilter', function MainController($scope, $filter, JokeService, JokeTypeRepeat) {

$scope.arrayOfViewableJokeTypes = {};

JS Filter:

angular.module('jsekoApp')
.filter('JokeTypeRepeat', function () {
  return function (allJokes, arrayOfViewableJokeTypes) {
    var filterJokesArray = [];

    angular.forEach(allJokes, function(individualJoke, index){
      if(arrayOfViewableJokeTypes[individualJoke.type]){
        filterJokesArray.push(individualJoke);
      }
    });

    return filterJokesArray;
  };
});