如何在 AngularJS 中将检查项目数组传递给对象？答案

【问题标题】：How Do I Pass Array of Checked Items into Object in AngularJS?如何在 AngularJS 中将检查项目数组传递给对象？
【发布时间】：2016-10-27 09:59:00
【问题描述】：

我有一个包含在ng-repeat 中的输入复选框，其函数vm.addRemoveItem() 用于ng-change，它将所有选中的项目存储在数组vm.itemsArr 中。我希望能够通过 webAPI 将数组传递给 c# 方法，但数组没有传递到我使用的变量中。请参阅下面代码中的正确描述

ng-repeat 中的复选框

<input type="checkbox" ng-model="item.selected" ng-change="vm.addRemoveItem()" value={{item.id}} /> {{item.title}}

将所有选中项存储在数组中的函数

vm.addRemoveItem = function () {
     vm.itemsArr = [];
     angular.forEach(vm.itemList, function (item) {
        if (item.selected) {
           vm.itemsArr.push(item.id);
        }
    })
}

我确认上述函数有效，因为我能够使用 alert() 显示检查项目数组的内容。

通过 webAPI 将值传递给 c#（我的挑战）

vm.itemObj= {
    itemInfoId: $stateParams.id,
    itemValues: JSON.stringify(vm.itemsArr)
};

这里的挑战是当我将上述对象itemObj 传递给通过webAPI 调用的函数时，它返回验证错误，因为itemValues 为空但itemInfoId 具有正确的值。如何将数组的内容传递给itemValues？

C# 函数

public async Task AddSubjectToClassInfoAsync(AddItemsInput input)
{
   //Code to add values to database 
}

//AddItemsInput Class
public class AddSubjectsInput
{
    public int ItemInfoId { get; set; }

    public string[] ItemValues { get; set; }
}

角度函数调用

vm.add = function () {
    subjectService.addtoDBAsync(vm.itemObj).success(function () {
        $modalInstance.close();
    })
};

【问题讨论】：

请提供您的 web api 方法和 ajax 调用
在函数vm.addRemoveItem之外定义vm.itemsArr = []
你的最后一段代码是在加载时而不是在运行时初始化的吗？
创建 vm.itemObj 的那段代码在哪里？您是否在创建警报之前放置了警报，以检查 vm.itemsArr 是否已填充
这是您的问题，它是在您填充 vm.itemsArr 之前创建的，因此 itemsValue 将始终为空。您应该在 Api 调用之前创建此对象

标签： c# angularjs asp.net-web-api

【解决方案1】：

当您将 vm.itemObj 的创建直接放在控制器内部时，它会在控制器构建后立即创建，这意味着 vm.itemsArr 尚未初始化或填充，因此您将获得一个空引用.

将对象vm.itemObj的创建改为；

vm.itemObj= {
    itemInfoId: $stateParams.id,
    itemValues: []
};

现在您可以将项目直接推送到 vm.itemObj.itemValues，或者在需要时将 itemValues 替换为另一个数组，可能在您即将执行 api 调用时。

vm.itemObj.itemValues = vm.itemsArr;

【讨论】：

你是个超级巨星！谢谢。这也适用于我。检查我对帖子本身的最后评论。在我看到你的答案之前我已经发布了。

【解决方案2】：

我认为您不需要将参数对象中的数组更改为json字符串

 itemValues: JSON.stringify(vm.itemsArr)

你可以发送数组，因为它是

 vm.itemsArr

并且 http 服务将使用 vm.itemObj 对象

【讨论】：

itemValues 仍然为空。