使用asp.mvc在angularjs中具有数组模型的复选框

Question

I am using Asp.MVC 5 for an application and I want to generate many checkboxes with different angularjs models, and I thought the best option is by using array model in angularjs. I tried the code below inside a 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 variable is an incrementing variable:

in the angularjs controller I have something like this:

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

When I use angularjs foreach loop the $scope.SelectedVessels seems to be empty but I dont know why!

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

Does anybody know where is the problem, why I cant access the inner properties of the $scope.SelectedVessels array and why it is empty ?

Answer 1

How you are adding values to your array ie. $scope.SelectedVessels is important Please have a look at below example.

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

First off , its ng-model not ng_model (- vs _) but that could be typo. Second, try this code

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

Answer 3

Here is the solution to this problem: I had to use ng-init to each checkbox to instantiate the 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()
})