Hey all you AngularJS experts, I have a thought-provoking question for you. I want to generate a dynamic list of form input fields based on a SELECT dropdown. Let's say we have different categories, each with its own unique set of specifications. To clarify, consider the following scenario:
To start, in the controller, we initialize the models.
$scope.category = {};
$scope.category.specs = [];
Then we prepare the data for the form (retrieved from the server via $http). We also set a variable to the first element in the categories array.
$scope.categories = [
{ "id": "1", "name": "mobile", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Camera type" } ] },
{ "id": "2", "name": "laptop", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Graphics Card" } ] }
};
$scope.selectedCategory = $scope.categories[0];
In the form, there's a dropdown that loads the specific input fields when selected. The ngRepeat directive is used to create this dynamic field list based on $scope.categories.specs. (note the ???)
<select ng-model="selectedCategory" ng-options="category.name for category in categories"></select>
<div ng-repeat="spec in selectedCategory.specs">
<label>{{spec.label}}</label>
<input type="text" ng-model="???">
</div>
When the user clicks submit, we want to extract the selected category and its associated specifications. The post request should contain something like this (with multiple specs included):
{ "id": "1", specs [ { "id": "2", "details": "RADEON HD 8970M" } ] }
I'm unsure how to achieve this. I need to create an array for the spec model and appropriately retrieve both the ID and user-entered data...what goes in the ??? and what's next? Any help would be greatly appreciated.