Question

我能够成功填充服务中的值的下拉列表，并可以在页面上输出所选的值，但我需要将这些值传递给数组，以便我可以存储选定的值。所需的功能是我可以从选项列表中添加和删除页面上的数组中的项目。

我遇到的问题是，当我点击添加按钮时，它表示“无法获取未定义或空引用的属性值”。我不相信我需要将所选值传递给add函数，因为它是一个ng-model并且它在页面上输出，但我开始怀疑这是否阻止我将所选值添加到阵列。

这是我的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>

这是我的控制器的相关部分。请注意，下拉列表是根据需要填充的，它只是将所选项目保存到一个问题的数组：

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

我不知道你为什么使用ng-submit，因为我看到你的html中没有表单元素。因此，如果您不使用它，请删除ng-submit。

此外，您不需要将selectedCategory作为参数传递给函数，因为您没有使用它。

如果您想将selectedCategory作为参数传递，则不应在函数参数中使用括号。

ng-click = "addItem(selectedCategory)"

---- html代码----

<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);
    }
}

我已经进行了上述更改并在jsFiddle

中进行了更新

Answer 2

谢谢大家。问题是DOT表示法，因为我正在使用页面级控制器。做出以下更改对我有用：

在App.js控制器绑定中声明为VM：

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

使用vm。作为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>

更新控制器以引用vm表示法：

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

Angular - 将所选值添加到数组

2 个答案: