Question

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

显示/隐藏＆＃39;类型＆＃39;的正确方法是什么？使用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];
};

大约有一个月变成棱角分明的，Wooot！

我尝试过的事情：

将ng-show="JokeTypeFilter[individualJoke.type]"移动到HTML中的指令声明或模板
更改ng-show的动画css，但它仍然无效
验证了范围变量JokeTypeFilter和AnswerTypeFilter在点击

Answer 1

根据此site，ng-show和| filter:*之间存在差异：

是的，有区别。使用过滤器时，在绘制视图之前，将从数组中删除不匹配的项目;当使用ngShow时，仍然会绘制不匹配的项目，并且所有绑定仍然绑定，但由于“display：none”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;
  };
});

使用关联数组和ng-animate按类型进行ng-repeat

1 个答案: