I'm trying to creata a dynamic drop down select menu. I'm getting an unknown provider error relating to a function I'm using to create a date range. Here is my code:
HTML
<ul data-role="listview" data-inset="true" >
<li>
<select id="makeSuperCategory" data-role="listview" ng-options="catagory as catagory.text for catagory in catagories.cast " ng-model="itemsuper" ng-change="changeData()">
</select>
</li>
</ul>
<ul data-role="listview" data-inset="true">
<li>
<select data-role="listview" ng-options="type as type.text for type in types.cast " ng-model="item1" ng-change="update()">
</select>
</li>
</ul>
Factories
var myApp = angular.module('myApp',[]);
myApp.factory('catagories',function(){
var makes = {};
makes.cast = [
{
value: "acura",
text: "Acura"
},
{
value: "audi",
text: "Audi"
},
{
value: "geo",
text: "Geo"
},
{
value: "hummer",
text: "Hummer"
},
];
return makes;
});
myApp.factory('acura',function( production_range,makesProductionEnded, makesInProduction){
var endedProductionObject = makesProductionEnded.filter(function( obj) {
return obj.make === this;
});
$scope.acura ={};
$scope.start = 1986 <!-- date Honda began production of the Acura product line -->
<!-- Set the most recent year option if still in production according to current month and model year change over October -->
$scope.setEnd = function(){
if($inArray(this, makesInProduction) > 0){
if(new Date().getMonth() < 10){
end = new Date().getFullYear();
} else {
end = new Date().getFullYear() + 1;
}
<!-- Set most recent year option if no longer in production according to year property value of object that matches this make in the endedProductionObject array -->
} else {
end = endedProductionObject.year;
}
return end;
}
$scope.acura.cast = [];
angular.foreach(years, function(value, year){
acura.cast.push(acura[year] = value);
});
return acura;
});
myApp.factory('audi',function(){
var audi = {};
audi.cast = [
<!--This will follow a similar pattern as acura once that is resolved -->
];
return audi;
});
myApp.factory('geo',function(){
var geo = {};
geo.cast = [
<!--This will follow a similar pattern as acura once that is resolved -->
];
return geo;
});
myApp.factory('hummer',function(){
var hummer = {};
hummer.cast = [
<!--This will follow a similar pattern as acura once that is resolved -->
];
return hummer;
});
Controller
myApp.controller('makeTypeCtrl',function($scope, acura, audi, geo,hummer, setNulls, catagories, production_range){
<!-- Push the model years into the years array according to the start and end dates -->
$scope.production_range = function(start, end){
var years = [];
for(var year = start; year <= end; year++){
years.push(year);
}
return years;
}
<!-- Defines the makes no longer in production and the date production ended for that make -->
$scope.makesProductionEnded = [{make:'eagle', year:1999}, {make:'geo', year:1997}]
<!-- Defines makes still in production -->
$scope.makesInProduction = ['acura', 'audi'];
$scope.catagories = catagories;
$scope.types = setNulls;
$scope.changeData = function() {
if($scope.itemsuper.text == "Acura") {
$scope.types = acura;
} else if($scope.itemsuper.text == "Audi") {
$scope.types = audi;
} else if($scope.itemsuper.text == "Geo") {
$scope.types = geo;
} else if($scope.itemsuper.text == "Hummer") {
$scope.types = hummer;
} else {
$scope.types = setNulls;
}
}
});
Here is a link to a jsFiddle
The issue is that you are trying to inject production_range
into your acura
factory. But production_range
is a variable on a controller's scope, not a factory or service that can be injected.
The second parameter to a factory should be a function that takes dependencies as its parameters. By dependencies I mean factories / services or anything else thats created from a provider, see https://docs.angularjs.org/guide/services and https://docs.angularjs.org/guide/providers. Read this as well: https://docs.angularjs.org/guide/di