JSFiddle - React, Tailwind, and code Playground

by Marc Geurts

HTML

<div ng-controller="TestCtrl">
    
    <input type="text" ng-model="search.Address" placeholder="Property Address" autocomplete="off">
        
        <br>
        
	<select ng-model="search.SubArea" ng-options="SubArea.SubArea as (SubArea.SubArea + ' (' + SubArea.Count + ')') for SubArea in subareas | orderBy:'SubArea'" size="20" ng-multiple="true" multiple>
	</select>
    
    
    <select ng-model="search.SubType" ng-options="SubType.SubType as (SubType.SubType + ' (' + SubType.Count + ')') for SubType in subtypes | orderBy:'SubType'" size="20" ng-multiple="true" multiple>
	</select>
    
            
            
     <select ng-model="search.Bedrooms" ng-options="Bedroom.Bedrooms as (Bedroom.Description + ' ' + Bedroom.Count) for Bedroom in bedrooms | orderBy:'Bedrooms'" size="20" ng-multiple="true" multiple>
	</select>
      
            
            {{ search.Bedrooms }} 
            
    
    <p ng-repeat="property in properties | MultiSelect: search">
    {{ property.ID }} - {{ property.Bedrooms }} - {{ property.SubType }} - {{ property.SubArea }} - {{ property.Address }}
    </p>
                                         
                                        
</div>

JavaScript

var testApp = angular.module('testApp',[]);


testApp.filter("MultiSelect", function() {
  return function (input,search) {
    var out = [], temp=[];
      
    
  
    if (search.SubArea) {
      angular.forEach(input,function (e) {
        if (search.SubArea.indexOf(e.SubArea)>=0 ) {
          temp.push(e);
        }
      })      
    } 
    
    if (search.Bedrooms) {
        out = [];
      angular.forEach(input,function (e) {
        if (search.Bedrooms.indexOf(e.Bedrooms)>=0 ) {
          temp.push(e);
        }
      })      
    } 
  
     if (search.SubType) {
        out = [];
      angular.forEach(input,function (e) {
        if (search.SubType.indexOf(e.SubType)>=0 ) {
          temp.push(e);
        }
      })      
    } 
    
      
    out = temp ;
    if (search.Address) {
      out = [];
      angular.forEach(temp,function (e) {
        if (e.Address.indexOf(search.Address)>=0 ) {
          out.push(e);
        }
      });      
    }
  return out;
  };
});

function TestCtrl($scope, $http) {
    
    
    $scope.Address = '';
    $scope.SubTypes = '';
    $scope.SubArea = '';
    $scope.Bedrooms = '';            
    
    $scope.subareas = {};

  	$http.get('http://www.propertywindow.com/propertylists/DeansProperties/sold_subareas.php')
	  .success(function(response) 
	  {
	  	$scope.subareas = response;
          
	  });
    
    
    $scope.subtypes = {};

  	$http.get('http://www.propertywindow.com/propertylists/DeansProperties/sold_subtypes.php')
	  .success(function(response) 
	  {
	  	$scope.subtypes = response;
          
	  });
   
    $scope.bedrooms = {};

  	$http.get('http://www.propertywindow.com/propertylists/DeansProperties/bedrooms.php')
	  .success(function(response) 
	  {
	  	$scope.bedrooms = response;
          
	  });
    
    

    
    $scope.properties = {};	

	$http.get('http://www.propertywindow.com/propertylists/DeansProperties/sold_properties.php')
	  .success(function(response) 
	  {
	  	$scope.properties =...