Блог

Я использую ng-repeat и показываю список, сверяя его тип с ассоциативным массивом в области видимости. Похоже, что ng-repeat будет анимироваться, когда я использую панель поиска (поиск заголовка) и слайдер (поиск атрибута в элементе, или когда дочерний div / директива фильтруется (в конечном итоге передается через эту директиву), но когда я нажимаю кнопку, чтобы указать тип в ассоциативном массиве для элемента, 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, Вооот!

Вещи, которые я пробовал:

• переход ng-show="JokeTypeFilter[individualJoke.type]" либо к объявлению директивы в HTML, либо к шаблону
• меняю анимацию css для ng-show , но она все еще не работает
• проверено, что переменные области JokeTypeFilter и AnswerTypeFilter обновляются при нажатии

Согласно этому сайту, существует разница между ng-show и | filter:* :

Да, разница есть. Когда вы используете фильтр, несоответствующие элементы удаляются из массива еще до того, как будет отрисован вид; при использовании ngShow несоответствующие элементы все равно будут отрисованы и все привязки останутся связанными, но это просто не будет видно из-за CSS-свойства «display: none».

Итак, я переключился на использование пользовательского фильтра.

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