JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div ng-app="testApp" ng-controller="testC">
<ul>
<li class="row" ng-repeat="f in filterTypes"><a href="#" ng-click="toggleTag(f);">{{f}}</a> </li>
</ul>
<ul>
<li ng-repeat="item in items | selectedFilters:filters" on-finish-render="test()">
<span>name: {{item.name}}</span>
<span>country: {{item.country}}</span>
</li>
</ul>
</div>
CSS
.row {
display: inline-block;
padding: 0 15px;
}
JavaScript
angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last) {
$timeout(function() {
scope.$eval(attr.onFinishRender);
});
}
}
}
})
.filter('selectedFilters', function(){
return function(items, filters) {
return items.filter(function(item) {
for (var i in item.country) {
if (filters.indexOf(item.country) != -1) {
return true;
}
}
return false;
});
};
})
.controller('testC', function($scope){
$scope.filterTypes = ['UK', 'USA', 'Switzerland'];
$scope.filters = ['UK'];
$scope.items = [{name: 'David', country: 'UK', featured: true},
{name: 'Brad', country: 'USA', featured: false},
{name: 'Schmidt', country: 'Switzerland', featured: true}];
$scope.test = function() {
alert("it has finished rendering!")
}
$scope.toggleTag = function(tag){
var tags = $scope.filters;
if(!_.contains(tags, tag)){
tags.push(tag);
}else{
removeType(tags, tag);
}
}
function removeType(arr, type) {
for (var i=arr.length - 1; i >=0; i--) {
if ( arr[i] === type ) {
arr.splice(i,1);
}
}
return arr;
}
});