mickelsonm/angular-vehicle-lookup.html

## angular-vehicle-lookup.html
<!DOCTYPE html>

<html ng-app="vehicleLookupApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Vehicle Lookup</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script type="text/javascript">
      var vehicleLookupApp = angular.module('vehicleLookupApp', []);

      vehicleLookupApp.value('AppConfig', {
        APIURL : 'http://localhost:8080'
      });

      vehicleLookupApp.factory('vehicles', function($http, AppConfig){
        return {
          GetYears: function(callback){
            $http({
              method: 'GET',
              url: AppConfig.APIURL + '/vehicles/years',
              cache: true
            }).success(function(data, status, headers, config){
            	if(callback){
            		callback(data, null);
            	}
            }).error(function(data, status, headers, config){
            	if(callback){
            		callback(null, data);
            	}
            });
          },
          GetMakes : function(vehicle, callback){
            $http({
              method: 'GET',
              url: AppConfig.APIURL + '/vehicles/makes',
              params: {
              	year: vehicle !== null ? vehicle.year : 0
              }
            }).success(function(data, status, headers, config){
            	if(callback){
            		callback(data, null);
            	}
            }).error(function(data, status, headers, config){
            	if(callback){
            		callback(null, data);
            	}
            });
          },
          GetModels : function(vehicle, callback){
            $http({
              method: 'GET',
              url: AppConfig.APIURL + '/vehicles/models',
              params:{
              	year: vehicle !== null ? vehicle.year : 0,
              	make: vehicle !== null ? vehicle.make : "none"
              }
            }).success(function(data, status, headers, config){
            	if(callback){
            		callback(data, null);
            	}
            }).error(function(data, status, headers, config){
            	if(callback){
            		callback(null, data);
            	}
            });
          },
          GetSubModels : function(vehicle, callback){
            $http({
              method: 'GET',
              url: AppConfig.APIURL + '/vehicles/submodels',
              params: {
              	year: vehicle !== null ? vehicle.year : 0,
              	make: vehicle !== null ? vehicle.make : "none",
              	model: vehicle !== null ? vehicle.model : "none"
              }
            }).success(function(data, status, headers, config){
            	if(callback){
            		callback(data, null);
            	}
            }).error(function(data, status, headers, config){
            	if(callback){
            		callback(null, data);
            	}
            });
          }
        }
      });

      vehicleLookupApp.controller('VehicleCtrl', function($scope, vehicles){
      	vehicles.GetYears(function(years, err){
      		if(err){
      			console.log(err);
      			return;
      		}
      		$scope.years = years !== undefined && years !== null ? years : [];
        });

        $scope.getMakes = function(){
        	if($scope.vehicle.year === '0'){
        		$scope.vehicle.make = '';
        		$scope.vehicle.model = '';
        		$scope.vehicle.submodel = '';
        		$scope.makes = [];
        		$scope.models = [];
        		$scope.submodels = [];
        		return;
        	}

        	vehicles.GetMakes($scope.vehicle, function(makes, err){
        		if(err){
        			console.log(err);
        			return;
        		}
        		$scope.makes = [];
        		$scope.models = [];
        		$scope.submodels = [];
        		$scope.makes = makes !== undefined && makes !== null ? makes : [];
        	});
        };

        $scope.getModels = function(){
        	if($scope.vehicle.make === ''){
        		$scope.vehicle.model = '';
        		$scope.vehicle.submodel = '';
        		$scope.makes = [];
        		$scope.models = [];
        		$scope.submodels = [];
        		return;
        	}

        	vehicles.GetModels($scope.vehicle, function(models, err){
        		if(err){
        			console.log(err);
        			return;
        		}
        		$scope.models = [];
        		$scope.submodels = [];
        		$scope.models = models !== undefined && models !== null ? models : [];
        	});
        };

        $scope.getSubModels = function(){
        	vehicles.GetSubModels($scope.vehicle, function(submodels, err){
        		if(err){
        			console.log(err);
        			return;
        		}
        		$scope.submodels = submodels !== undefined && submodels !== null ? submodels : [];
        	});
        };
      });
    </script>
  </head>
  <body ng-controller="VehicleCtrl">
    <form>
      <select ng-init="vehicle.year = 0" ng-model="vehicle.year" ng-change="getMakes()">
        <option value="0">- Select Year -</option>
        <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
      </select>

      <select ng-init="vehicle.make = ''" ng-model="vehicle.make" ng-change="getModels()">
        <option value="">- Select Make -</option>
        <option ng-repeat="make in makes" value="{{make}}">{{make}}</option>
      </select>

      <select ng-init="vehicle.model = ''" ng-model="vehicle.model" ng-change="getSubModels()">
        <option value="">- Select Model -</option>
        <option ng-repeat="model in models" value="{{model}}">{{model}}</option>
      </select>

      <select ng-init="vehicle.submodel = ''" ng-model="vehicle.submodel">
        <option value="">- Select Submodel -</option>
        <option ng-repeat="submodel in submodels" value="{{submodel}}">{{submodel}}</option>
      </select>
    </form>
  </body>
</html>
	<!DOCTYPE html>

	<html ng-app="vehicleLookupApp">
	<head>
	<meta charset="utf-8">
	<title>Angular.js Vehicle Lookup</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
	<script type="text/javascript">
	var vehicleLookupApp = angular.module('vehicleLookupApp', []);

	vehicleLookupApp.value('AppConfig', {
	APIURL : 'http://localhost:8080'
	});

	vehicleLookupApp.factory('vehicles', function($http, AppConfig){
	return {
	GetYears: function(callback){
	$http({
	method: 'GET',
	url: AppConfig.APIURL + '/vehicles/years',
	cache: true
	}).success(function(data, status, headers, config){
	if(callback){
	callback(data, null);
	}
	}).error(function(data, status, headers, config){
	if(callback){
	callback(null, data);
	}
	});
	},
	GetMakes : function(vehicle, callback){
	$http({
	method: 'GET',
	url: AppConfig.APIURL + '/vehicles/makes',
	params: {
	year: vehicle !== null ? vehicle.year : 0
	}
	}).success(function(data, status, headers, config){
	if(callback){
	callback(data, null);
	}
	}).error(function(data, status, headers, config){
	if(callback){
	callback(null, data);
	}
	});
	},
	GetModels : function(vehicle, callback){
	$http({
	method: 'GET',
	url: AppConfig.APIURL + '/vehicles/models',
	params:{
	year: vehicle !== null ? vehicle.year : 0,
	make: vehicle !== null ? vehicle.make : "none"
	}
	}).success(function(data, status, headers, config){
	if(callback){
	callback(data, null);
	}
	}).error(function(data, status, headers, config){
	if(callback){
	callback(null, data);
	}
	});
	},
	GetSubModels : function(vehicle, callback){
	$http({
	method: 'GET',
	url: AppConfig.APIURL + '/vehicles/submodels',
	params: {
	year: vehicle !== null ? vehicle.year : 0,
	make: vehicle !== null ? vehicle.make : "none",
	model: vehicle !== null ? vehicle.model : "none"
	}
	}).success(function(data, status, headers, config){
	if(callback){
	callback(data, null);
	}
	}).error(function(data, status, headers, config){
	if(callback){
	callback(null, data);
	}
	});
	}
	}
	});

	vehicleLookupApp.controller('VehicleCtrl', function($scope, vehicles){
	vehicles.GetYears(function(years, err){
	if(err){
	console.log(err);
	return;
	}
	$scope.years = years !== undefined && years !== null ? years : [];
	});

	$scope.getMakes = function(){
	if($scope.vehicle.year === '0'){
	$scope.vehicle.make = '';
	$scope.vehicle.model = '';
	$scope.vehicle.submodel = '';
	$scope.makes = [];
	$scope.models = [];
	$scope.submodels = [];
	return;
	}

	vehicles.GetMakes($scope.vehicle, function(makes, err){
	if(err){
	console.log(err);
	return;
	}
	$scope.makes = [];
	$scope.models = [];
	$scope.submodels = [];
	$scope.makes = makes !== undefined && makes !== null ? makes : [];
	});
	};

	$scope.getModels = function(){
	if($scope.vehicle.make === ''){
	$scope.vehicle.model = '';
	$scope.vehicle.submodel = '';
	$scope.makes = [];
	$scope.models = [];
	$scope.submodels = [];
	return;
	}

	vehicles.GetModels($scope.vehicle, function(models, err){
	if(err){
	console.log(err);
	return;
	}
	$scope.models = [];
	$scope.submodels = [];
	$scope.models = models !== undefined && models !== null ? models : [];
	});
	};

	$scope.getSubModels = function(){
	vehicles.GetSubModels($scope.vehicle, function(submodels, err){
	if(err){
	console.log(err);
	return;
	}
	$scope.submodels = submodels !== undefined && submodels !== null ? submodels : [];
	});
	};
	});
	</script>
	</head>
	<body ng-controller="VehicleCtrl">
	<form>
	<select ng-init="vehicle.year = 0" ng-model="vehicle.year" ng-change="getMakes()">
	<option value="0">- Select Year -</option>
	<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
	</select>

	<select ng-init="vehicle.make = ''" ng-model="vehicle.make" ng-change="getModels()">
	<option value="">- Select Make -</option>
	<option ng-repeat="make in makes" value="{{make}}">{{make}}</option>
	</select>

	<select ng-init="vehicle.model = ''" ng-model="vehicle.model" ng-change="getSubModels()">
	<option value="">- Select Model -</option>
	<option ng-repeat="model in models" value="{{model}}">{{model}}</option>
	</select>

	<select ng-init="vehicle.submodel = ''" ng-model="vehicle.submodel">
	<option value="">- Select Submodel -</option>
	<option ng-repeat="submodel in submodels" value="{{submodel}}">{{submodel}}</option>
	</select>
	</form>
	</body>
	</html>