JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myController">
    <ul>
        <li ng-repeat="post in posts | PostFilter: min_age:max_age:gender | orderBy: sorting">{{post.Title}} | {{post.Post}}</li>
    </ul>
</div>

JavaScript

var data = [
   		{
        id: 1,
    		Title: "AAA",
    		Post: "VVV",
    		Gender: "M",
   			Age: 26,
    		Date: "2018-02-16"
  },
	{ 
  			id: 2,
    		Title: "FFF",
    		Post: "HHH",
    		Gender: "F",
    		Age: 34,
    		Date: "2018-08-10"
	},
	{ 
  			id: 3,
    		Title: "ASD",
    		Post: "GGG",
    		Gender: "M",
    		Age: 14,
   			Date: "2018-03-22"
	},
	{
  			id: 4,
    		Title: "DDD",
    		Post: "KKT",
    		Gender: "F",
    		Age: 38,
    		Date: "2018-03-23"
	},
	{
  			id: 5,
    		Title: "BRT",
    		Post: "WWW",
    		Gender: "M",
    		Age: 17,
    		Date: "2018-03-23"
  }     
];

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
   $scope.posts = data; 
   $scope.sorting='Title';
});

myApp.filter("PostFilter", function(){
   
    return function(posts, min_age, max_age, gender){

        var addpost;
        var selectedPosts = [];
        
        min_age=16;
        max_age=35;
        gender='M';
        
        for(i=0;i<posts.length;i++){
            
            addPost = false;
            
           
               if (posts[i].Age >= min_age && posts[i].Age <= max_age && posts[i].Gender == gender){
                    addPost = true;                    
                }
            
            
            if (addPost){
                selectedPosts.push(posts[i]);
            }
        }
        
        return selectedPosts;
    };
    
});