I've been struggling for hours to figure out how to build this functionality. My code seems to be getting close, but I'm having trouble passing my selection from the HTML back to the controller.
Here's my Angular code:
var Categories = Parse.Object.extend("bizCategories");
$scope.categories = [
{category: "Food and Drink"},
{category: "Healthcare"},
{category: "Recreation"},
{category: "Service"},
{category: "Shops"},
{category: "Travel"}
]
$scope.setPrimary = function (category) {
$scope.offer.primary = category;
$scope.secondaryCategories(category);
};
$scope.secondaryCategories = function(category){
var Secondary = new Parse.Query(Categories);
Secondary.limit(1000);
Secondary.find({
success:function(list){
$scope.SecondaryCategories = _.uniq(_.filter(_.map(list, function(item){
return{primary: item.get('secondary')
}}
)),'primary',true)
console.log($scope.SecondaryCategories);
},
error: function(error){alert("A mistake was made.");
}
})
}
This is how my html looks:
<select id= 'primary' ng-model="offer.primary" ng-options="XXX.category for XXX in categories"
ng-click= setPrimary(category)>
<option value="">Primary Business Category</option>
</select>
<select id= 'secondary' ng-model="offer.secondary" ng-disabled="!offer.primary"
ng-options="XXX.category for XXX in SecondaryCategories" ng-click="setSecondary('XXX.category')">
<option value="">Secondary Business Category</option>
</select>
In my html, you'll notice that I used XXX as a placeholder for ng-options. This decision was arbitrary, as I couldn't find a specific requirement in the tutorials. Additionally, I am encountering an issue where the data from the first dropdown is not getting passed to the second dropdown function (category) and is showing up as undefined.
The source of my data: