Angular - Add selected value to array

Question

I am able to successfully populate a dropdown from values in a service and can output the selected value on page, but I need to pass these into an array so I can store the selected values. The desired functionality is that I can add and remove items from the array on page from the list of options.

The issue I am having is that when I hit the add button, it is stating that it is "Unable to get property 'value' of undefined or null reference". I don't believe I need to be passing the selected value into the add function as it is an ng-model and it outputs on page, but I am starting to wonder if that is what is preventing me from adding the selected values to an array.

Here is my HTML:

<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>

Here is the relevant part of my controller. Please note that the dropdown is populating as desired, it is just the saving the selected item to an array that is an issue:

    // Get list of values for use in the Category dropdown
    $scope.categoryValues = [];

    // Array to store selected values
    $scope.storedCategoryValues = [];

    // Query REST service for values
    appDetailedEventsList.query(function (categorydata) {
        var categoryValues = categorydata.value; // Data is within an object of "value", so this pushes the server side array into the $scope array

        // Foreach type, push values into types array
        angular.forEach(categoryValues, function (categoryvalue, categorykey) {

            $scope.categoryValues.push({
                label: categoryvalue.Title,
                value: categoryvalue.ID,
            });
        })
    });

    // Add selection to array
    $scope.addItem = function () {
        $scope.storedCategoryValues.push({
            id: $scope.selectedCategory.value,
            title: $scope.selectedCategory.label
        });
        console.log($scope.storedCategoryValues);
    }

Answer 1

Thanks all. The issue was the DOT notation, as I am using a page level controller. Making the following changes worked for me:

Declare as VM in the App.js controller binding:

when('/my-form', { templateUrl: '/views/my-form.html', controller: 'appCtrl as vm' }).

Use vm. as a prefix for selectedCategory:

<select class="form-control" id="Event_Cat" data-ng-model="vm.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 class="form-control" data-ng-click="addItem()">Add <i class="fa fa-angle-right"></i></button>
                        <br />
                    </div>

Updated the controller to reference the vm notation:

// Add Category
    $scope.addItem = function () {
        $scope.storedCategoryValues.push({
            id: $scope.vm.selectedCategory.value,
            title: $scope.vm.selectedCategory.label
        });
        console.log($scope.storedCategoryValues);
    }

Answer 2

I don't know why are you using ng-submit , since I see there is no form element in your html. Hence remove ng-submit if ur not using it.

Also you don't need to pass selectedCategory as an argument to the function, since you're not using it.

If you wanna pass selectedCategory as an argument you should not use brackets inside function argument.

ng-click = "addItem(selectedCategory)"

----html code ----

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="appCtrl">
    <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 class="form-control" ng-click="addItem()">Add <i class="fa fa-angle-right"></i></button>
                        <br />
                    </div>
  </div>
</div>

--- js code ----

function appCtrl($scope) {
  // Get list of values for use in the Category dropdown
    $scope.categoryValues = [{label:'label1',value:'value1'},{label:'label2',value:'value2'}];

    // Array to store selected values
    $scope.storedCategoryValues = [];

    // Query REST service for values    
    // Add selection to array
    $scope.addItem = function () {
        $scope.storedCategoryValues.push({
            id: $scope.selectedCategory.value,
            title: $scope.selectedCategory.label
        });
        console.log($scope.storedCategoryValues);
    }
}

I have made the above changes and updated in jsFiddle