使用asp.mvc在angularjs中使用數組模型的複選框

我對應用程序使用Asp.MVC 5，我想用不同的angularjs模型生成很多複選框，我認爲最好的選擇是在angularjs中使用數組模型。我想下面的代碼foreach內：使用asp.mvc在angularjs中使用數組模型的複選框

@{ 
     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="[email protected](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陣列的內部性能，它爲什麼是空的？

來源

2017-09-15 Rajmond Burgaj

哪裏在$ scope.SelectedVessels被填充的代碼中？ – yesIcan

在控制器中。我嘗試在ng-init中，但沒有工作 –

你的問題目前還不清楚。你可以分享你的代碼，如果可能的話，通過plunker或jsfiddle？ – yesIcan

這裏是解決這個問題：我不得不使用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() 
})

來源

2017-09-18 23:05:56

如何給數組添加值。 $ 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']);

來源

2017-09-15 22:11:35

這些值被添加到視圖中的C＃代碼中，因爲視圖的模型具有'selectedVesselViewModel'列表，所以它們來自後端。最後，我列出了一些複選框，其中一些被選中，一些未被選中。但我需要在angularjs中訪問這些值 –

請參閱編輯，以便您可以看到整個視圖部分 –

從哪裏調用此方法_RefreshSideBarVessels _ –

首先，其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) 
     })

來源

2017-09-15 23:22:55 yesIcan

它也不以這種方式工作，因爲ng_model是正確的，因爲asp.mvc會在頁面呈現時將其轉換爲ng-model。無論如何感謝您的幫助:) –

使用asp.mvc在angularjs中使用數組模型的複選框

回答

相關問題