angularjs中使用asp.mvc的数组模型复选框答案

【问题标题】：Checkboxes with array model in angularjs using asp.mvcangularjs中使用asp.mvc的数组模型复选框
【发布时间】：2018-02-25 03:11:45
【问题描述】：

我正在为应用程序使用 Asp.MVC 5，我想生成许多具有不同 angularjs 模型的复选框，我认为最好的选择是在 angularjs 中使用数组模型。我在foreach 中尝试了下面的代码：

   @{
        int i = 0;
        foreach (var selectedVesselViewModel in Model.SelectedVesselViewModels)
        {
            using (Html.BeginForm("SelectNotificaiton", "Admin", new { area = "DashBoard" }, FormMethod.Post, new { id = "filterVesselsForm_" + i}))
            {
                @Html.HiddenFor(item => selectedVesselViewModel.VesselId, new {ng_model= "SelectedVessels[" + i + "].VesselId" })
                <li class="row">
                    <div class="col-md-10">
                        <a href="#" class="text-admin-area">
                            @selectedVesselViewModel.VesselName
                        </a>
                    </div>
                    <div class="col-md-2">        
                        <div class="pull-right">
                            <div class="checkbox checkbox-inline">
                                @Html.CheckBoxFor(item => selectedVesselViewModel.Selected,
                               new {id = "SelectedVesselViewModels_"+i+"__Selected",
                                   onchange ="document.getElementById('filterVesselsForm_"+i+"').submit()",
                                   ng_model = "SelectedVessels[" + i + "].Selected"
                               })
                                <label for="SelectedVesselViewModels_@(i++)__Selected"></label>
                            </div>
                        </div>
                    </div>
                </li>
            }
        }
    }

i变量是一个递增变量：

在 angularjs 控制器中我有这样的东西：

(function (app) {
"use strict";
app.controller("DashboardCtrl", ['$scope',
    function ($scope) {
        function init() {
          // $scope.SelectedVessels = [];
        }

        $scope.SelectedVessels = [];
        init();
        $scope.RefreshSideBarVessels = function() {
            angular.forEach($scope.SelectedVessels, function (value, key) {
                alert($scope.SelectedVessels[key].VesselId);
            });
        }
    }]);
 })(adminModule);

当我使用 angularjs foreach 循环时，$scope.SelectedVessels 似乎是空的，但我不知道为什么！

 angular.forEach($scope.SelectedVessels, function (value, key) {
         alert($scope.SelectedVessels[key].Selected);
 });

有谁知道问题出在哪里，为什么我无法访问$scope.SelectedVessels 数组的内部属性以及为什么它是空的？

【问题讨论】：

$scope.SelectedVessels 填充在代码的什么位置？
在控制器中。我在 ng-init 中尝试过，但没有成功
你的问题我还不清楚。如果可能的话，你能通过 plunker 或 jsfiddle 分享你的代码吗？
Oki 我会尽快为你准备一个 asp.mvc 小提琴
@yesIcan 你现在可以看到我的编辑。我希望 $scope.SelectedVessels 将被填充到 c# 代码中的 foeach 循环中

标签： javascript asp.net angularjs asp.net-mvc

【解决方案1】：

您如何向数组添加值，即。 $scope.SelectedVessels 很重要请看下面的例子。

var values = {name: 'Raja', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
}, log);
expect(log).toEqual(['name: Raja', 'gender: male']);

【讨论】：

值被添加到c#代码的视图中，因为视图的模型有一个列表selectedVesselViewModel，所以它们来自后端。最后，我有一个复选框列表，有些已选中，有些未选中。但我也需要在 angularjs 中访问这些值
从哪里调用这个方法_RefreshSideBarVessels _
它是foreach循环上方的另一个按钮，所以当我点击它时，我怀疑在警报消息中一一看到数组模型的所有值
抱歉另一个愚蠢的问题，您的 html/MVC 已分配/绑定到正确的控制器，即。 DashboardCtrl
不要调用 RefreshSideBarVessels () 方法，而是尝试从按钮 onclick 传递 RefreshSideBarVessels (SelectedVessels) 将调试器放入 RefreshSideBarVessels 并检查您是否在 pass 参数中获取值。 $scope.RefreshSideBarVessels = function(SelectedVessels,) { angular.forEach(SelectedVessels, function (value, key) { alert(SelectedVessels[key].VesselId); }); }这可能会解决您的问题

【解决方案2】：

以下是解决此问题的方法：我必须对每个复选框使用 ng-init 来实例化 ng-model。

@Html.CheckBoxFor(item => selectedVesselViewModel.Selected,
   new {id = "SelectedVesselViewModels_"+i+"__Selected",
       onchange ="document.getElementById('filterVesselsForm_"+i+"').submit()",
       ng_model = "SelectedVessels[" + i + "].Selected",
       ng_init = "SelectedVessels[" + i + "].Selected="+ selectedVesselViewModel.Selected.ToString().ToLower()
})

【讨论】：

【解决方案3】：

首先，它的 ng-model 不是 ng_model (- vs _)，但这可能是错字。二、试试这段代码

$scope.onChange = function (index, value) {
      $scope.SelectedVessels[index] = value;
}
@Html.CheckBoxFor(item => selectedVesselViewModel.Selected,
SelectedVessels[i] = selectedVesselViewModel.Selected
       new {id = "SelectedVesselViewModels_"+i+"__Selected",
           onchange ="document.getElementById('filterVesselsForm_"+i+"').submit()",
           ng-model = "SelectedVessels[" + i + "].Selected", 
           on-change="onChange(i,selectedVesselViewModel.Selected)
       })

【讨论】：

这种方式也不行，对于 ng_model 是正确的，因为当页面被渲染时，asp.mvc 会将其转换为 ng-model。无论如何感谢您的帮助:)