使用ASP.MVC在AngularJ中使用数组模型的复选框

Question

我正在使用ASP.MVC 5用于应用程序，我想生成许多具有不同AngularJS模型的复选框，我认为最好的选择是在AngularJS中使用Array模型。我在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数组的内部属性？为什么它是空的？

Answer 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']);

Answer 2

这是解决此问题的解决方案：我必须使用ng-init到每个复选框来实例化NG模型。

@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()
})

Answer 3

首先，其ng模型不是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)
       })