JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table>
<tr>
<td width="110">Address </td>
<td>
<input type="text" name="Address" ng-model="Address" class="form-control" placeholder="Property Address" autocomplete="off"/>
</td>
</tr>
<tr>
<td width="110">SubArea </td>
<td>
<select class="form-control" name="SubArea" ng-model="SubArea" ng-options="property.data.SubArea as (property.data.SubArea + ' ('+ property.count +')') for property in properties | unique:'SubArea' | orderBy:'data.SubArea'" multiple="multiple">
</select>
</td>
</tr>
<tr>
<td width="110">SubType </td>
<td>
<select class="form-control" name="SubType" ng-model="SubType" ng-options="property.data.SubType as (property.data.SubType + ' ('+ property.count +')') for property in properties | unique:'SubType' | orderBy:'data.SubType'">
<option value="">All Subtypes</option>
</select>
</td>
</tr>
<tr>
<td width="110">Bedrooms </td>
<td>
<select class="form-control" name="bedrooms" ng-model="Bedrooms" ng-options="property.data.Bedrooms as (property.data.Bedrooms + ' Bedrooms ('+ property.count +')') for property in properties | unique:'Bedrooms' | orderBy:'data.Bedrooms'">
<option value="">Minimum Bedrooms</option></select>
</td>
</tr>
</table>
<hr/>
{{...
JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',['$scope', '$http',function ($scope, $http) {
$scope.properties = {};
$http.get('http://www.propertywindow.com/propertylists/DeansProperties/properties.php')
.success(function(response)
{
$scope.properties = response;
});
$scope.Bedrooms = 0;
//Filter Function
$scope.greaterThan = function(bedrooms) {
console.log(bedrooms);
return function(item) {
if ( item['Bedrooms'] > bedrooms) {
return true;
} else {
return false;
}
}
};
}]);
//filter Multiple...
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
var filterObj = {
data:items,
filteredData:[],
applyFilter : function(obj,key){
var fData = [];
if(this.filteredData.length == 0)
this.filteredData = this.data;
if(obj){
var fObj = {};
if(angular.isString(obj)){
fObj[key] = obj;
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}else if(angular.isArray(obj)){
if(obj.length > 0){
for(var i=0;i<obj.length;i++){
if(angular.isString(obj[i])){
fObj[key] = obj[i];
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}
}
}
}
if(fData.length > 0){
this.filteredData = fData;
}
}
}
};
if(keyObj){
angular.forEach(keyObj,function(obj,key){
filterObj.applyFilter(obj,key);
});
}
return filterObj.filteredData;
}
}]);
myApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
var obj, val;
for(var i = 0; i <...