#angularjs #angularjs-ng-repeat #ng-animate
#angularjs #angularjs-ng-repeat #ng-animate
Вопрос:
Я использую 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
обновляются при нажатии
Ответ №1:
Согласно этому сайту, существует разница между 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;
};
});