I am completely new to AngularJS framework and just experimenting with it. Therefore, I'm not entirely sure if my current approach is the best or right way to achieve my goal.
My aim is to create a 3-level chained ajax-filled select boxes, and while it seems to be partly working, there are a couple of issues that I've encountered.
While my actual code utilizes ajax within a factory, for the purpose of this demo on fiddle, I have used a controller to return results from an array instead.
Demo (using arrays, not ajax): http://jsfiddle.net/xxwe1zu8/1/
Challenges:
- The second and third level selects do not have a "selected" attribute, meaning the selected option does not get highlighted.
- Ideally, I would like the top-level categories to be dynamically populated on page load via ajax (or in this case, using an array) by utilizing the same angular function (e.g., getSubcategories = function(0, 0)) rather than hardcoding them. Top level categories have a parent of 0.
Bonus: Is it possible to show/only make the third select box visible if there is a sub-sub-category returned after selecting the sub-category? In most cases, sub-categories won't have further sub-categories.
var myAppModule = angular.module('myApp',[]); myAppModule.controller('SearchCtrl', function($scope) { var self = this; self.subCategories = []; self.getSubcategories = function(parent, level) { theCategories = []; angular.forEach(sub_category[parent], function(idx, val) { theCategories.push({id: val, name: idx}); }); self.subCategories[level] = theCategories; } });
Thank you