JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div ng-app='test'>
<div ng-controller='mainController'>
<input type="text" ng-model="subcats" arrayanizeit/>
{{subcats}}
<div class='container'>
<div ng-repeat='movie in movies | subcategories:subcats'>
<div class='movie'>{{movie.title}}</div>
</div>
</div>
</div>
</div>
CSS
.movie {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 1s;
}
.container {
position: relative;
margin-top: 20px;
}
JavaScript
var app = angular.module('test', []);
app.filter('subcategories', function() {
return function(movies, categories) {
var matching = [];
console.log('categories:', categories);
_.each(movies, function(movie) {
var missingTags = (_.difference(categories, movie.subcategoryList).length > 0);
console.log('missingTags:', missingTags);
if (!missingTags) matching.push(movie);
});
return matching;
};
});
app.directive("arrayanizeit", function(){
return{
require: 'ngModel',
restrict: 'A',
link: function(scope, ele, attr, ctrl){
ctrl.$parsers.unshift(
function(viewValue){
return viewValue.length ? viewValue.split(" ") : [];
}
);
ctrl.$formatters.unshift(
function(modelValue){
if(modelValue) return modelValue.join(" ");
}
);
}
};
});
var controller = app.controller('mainController', function($scope) {
$scope.subcats = ['Drama'];
$scope.movies = [
{ title: 'Red Dawn', subcategoryList: ['Drama', 'Comedy'] },
{ title: 'The Hobbit', subcategoryList: [] },
{ title: 'Zero Dark Thirty', subcategoryList: ['Comedy'] },
{ title: 'Rise of the Guardians', subcategoryList: ['Drama'] }
];
$scope.$watch('subcats', reflow);
function reflow() {
setTimeout(function() {
$('.movie').each(function(i) {
$(this).css('top', i * 30 + 'px');
});
}, 0);
}
});