使用关联数组和 ng-animate 按类型重复 ng-repeat

Question

我正在使用 ng-repeat，并通过根据范围上的关联数组检查其类型来显示列表。当我使用搜索栏（搜索标题）和滑块（搜索项目上的属性，或者过滤子 div/指令（最终通过该指令）时，似乎 ng-repeat 会动画，但是当我单击按钮以对项目的关联数组上的类型进行真/假，css 动画不起作用。

使用ng-repeat 在列表中显示/隐藏项目的“类型”以允许动画发生的正确方法是什么？

这里是 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>

这里是控制器，带有关联数组：

$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];
};

大约一个月的 Angular，Wooot！

我尝试过的事情：

• 将 ng-show="JokeTypeFilter[individualJoke.type]" 移动到 HTML 中的指令声明或模板中
• 更改 ng-show 的动画 css，但仍然无法正常工作
• 已验证范围变量 JokeTypeFilter 和 AnswerTypeFilter 在单击时更新

Answer 1

根据这个site，ng-show和| filter:*是有区别的：

是的，有区别。当您使用过滤器时，不匹配的项目会在绘制视图之前从数组中删除；使用 ngShow 时，仍然会绘制不匹配的项目，并且仍然绑定所有绑定，但由于“显示：无”CSS 属性，它只是不可见。

所以我改用自定义过滤器。

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 控制器：

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

$scope.arrayOfViewableJokeTypes = {};

JS 过滤器：

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;
  };
});