角度 - 将所选值添加到数组

Angular - Add selected value to array

本文关键字：添加 数组 角度      更新时间：2023-09-26

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

我遇到的问题是，当我点击添加按钮时，它指出它是"无法获取未定义或空引用的属性'值'"。我不认为我需要将所选值传递到 add 函数中，因为它是一个 ng 模型并且它在页面上输出，但我开始怀疑这是否是阻止我将所选值添加到数组的原因。

这是我的 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);
    }
我不知道

你为什么要使用 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 代码----

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中进行了更新

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

在应用.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);
    }
相关文章：