Successfully populating a dropdown from values in a service and displaying the selected value on a page is working fine. However, the challenge lies in passing these selected values into an array for storage purposes. The intention is to allow users to add and remove items from the array directly on the page based on the list of options available.
The issue I'm encountering occurs when attempting to add an item to the array. An error message pops up saying, "Unable to get property 'value' of undefined or null reference". It seems like there might be a problem with how I am handling the selected value within the add function. Although the selected value is already bound to an ng-model and displayed on the page, it's possible that this linkage is hindering my ability to add the selected values to the array.
Below is the snippet of relevant HTML code:
<label for="Event_Cat" class="col-xs-12 col-md-3 nonwrap lead">Categories</label>
<div class="col-xs-12 col-md-4">
<select class="form-control" id="Event_Cat" data-ng-model="selectedCategory"
data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
</div>
{{selectedCategory.label}}
<div class="hidden-xs hidden-sm col-md-2">
<button type="submit" class="form-control" data-ng-click="addItem({{selectedCategory.label}})">Add <i class="fa fa-angle-right"></i></button>
<br />
</div>
And here is the section of my controller that holds significance. Note that the dropdown population is functioning correctly; the issue only arises when attempting to save the selected item to an array:
// Retrieve list of values to populate the Category dropdown
$scope.categoryValues = [];
// Array for storing selected values
$scope.storedCategoryValues = [];
// Fetch values from REST service
appDetailedEventsList.query(function (categorydata) {
var categoryValues = categorydata.value;
angular.forEach(categoryValues, function (categoryvalue, categorykey) {
$scope.categoryValues.push({
label: categoryvalue.Title,
value: categoryvalue.ID,
});
})
});
// Function to add selection to the array
$scope.addItem = function () {
$scope.storedCategoryValues.push({
id: $scope.selectedCategory.value,
title: $scope.selectedCategory.label
});
console.log($scope.storedCategoryValues);
}