I want to do selected listbox items to another listbox, here data will come from database here item is not fixed ,for that reason i need to convert list to multidimensional array. Please check my controller,angular controller and view
In controller:
public class MainDivisionDesignationMapController : Controller
{
private HumanResourceDepartmentDBEntities db = new HumanResourceDepartmentDBEntities();
[HttpGet]
public ActionResult Index()
{
return View();
}
public JsonResult AllListofMainDivisionDesignation()
{
List<HrDesignation> designation = new List<HrDesignation>();
var designationgroup = db.HrDesignationGroup.Where(p=>p.Rank==2).ToList();
foreach (var des in designationgroup)
{
var desig = db.HrDesignation.Where(i=> i.DesignationGroupId == des.DesignationGroupId)
.OrderBy(r => r.Rank).ToList();
designation.AddRange(desig);
}
return Json(designation, JsonRequestBehavior.AllowGet);
}
}
angular controller:
var app = angular.module("myMainDivisionDesignationMap", []);
app.controller("MainDivisionDesignationMapCtrl",
function ($scope, $http) {
$scope.selectFaIndex = 0;
$scope.SelectedAvailItems = [];
$scope.SelectedSelectedListItems = [];
$scope.DefaultListItems = [
[]
];
$scope.SelectedListItems = [
[]
];
$scope.AvailableListItems = [
[]
];
AllListofMainDivisionDesignation();
function AllListofMainDivisionDesignation() {
$http.get("MainDivisionDesignationMap/AllListofMainDivisionDesignation").then(function(t) {
$scope.List = t.data;
var inputObj = t.data;
angular.forEach(inputObj, function (value, key) {
this.DefaultListItems.push(key.DesignationName + ':' + value.DesignationName);
});
}); alert($scope.DefaultListItems);
}
angular.copy($scope.DefaultListItems, $scope.AvailableListItems);
alert($scope.AvailableListItems);
$scope.btnRight = function () {
//move selected.
angular.forEach($scope.SelectedAvailItems, function (value, key) {
this.push(value);
}, $scope.SelectedListItems[$scope.selectFaIndex]);
//remove the ones that were moved.
angular.forEach($scope.SelectedAvailItems, function (value, key) {
for (var i = $scope.AvailableListItems[$scope.selectFaIndex].length - 1; i >= 0; i--) {
if ($scope.AvailableListItems[$scope.selectFaIndex][i].DesignationName === value.DesignationName) {
$scope.AvailableListItems[$scope.selectFaIndex].splice(i, 1);
}
}
});
$scope.SelectedAvailItems = [];
};
$scope.btnLeft = function () {
//move selected.
angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
this.push(value);
}, $scope.AvailableListItems[$scope.selectFaIndex]);
//remove the ones that were moved from the source container.
angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
for (var i = $scope.SelectedListItems[$scope.selectFaIndex].length - 1; i >= 0; i--) {
if ($scope.SelectedListItems[$scope.selectFaIndex][i].DesignationName === value.DesignationName) {
$scope.SelectedListItems[$scope.selectFaIndex].splice(i, 1);
}
}
});
$scope.SelectedSelectedListItems = [];
alert($scope.AvailableListItems);
};
});
In View:
@{
ViewBag.Title = "Index";
}
<div ng-app="myMainDivisionDesignationMap">
<div ng-controller="MainDivisionDesignationMapCtrl">
<div></div>
<div style="margin-left: 90px;">
<form class="form-horizontal" role="form" name="adduserform">
<table>
<tr style="height: 35px; margin-bottom: 10px;">
<tr>
<td style="background-color: #666699">
<span style="margin-left: 5px; color: white; background-color: #666699; width: 250px;">Available Designations</span>
</td>
<td></td>
<td style="background-color: #666699">
<span style="margin-left: 5px; color: white; background-color: #666699; width: 250px;">Assigned Designations</span>
</td>
<tr>
<tr>
<td>
<div>
<select multiple id="availabelist" size="10" style="width: 275px" ng-change="OnAvailableChange()" ng-model="SelectedAvailItems" ng-options="i.DesignationId as i.DesignationName for i in AvailableListItems[selectFaIndex]"></select>
</div>
</td>
<td>
<div style="float: left">
<input id="btnRight" type="button" value=">>" style="width: 50px" ng-click="btnRight()" />
<br /><br />
<input id="btnLeft" type="button" value="<<" style="width: 50px" ng-click="btnLeft()" />
</div>
</td>
<td>
<div>
<select multiple id="selectedlist" size="10" style="width: 275px" ng-model="SelectedSelectedListItems" ng-options="i.DesignationId as i.DesignationName for i in SelectedListItems[selectFaIndex]'"></select>
</div>
</td>
<tr></tr>
</table>
<div class="form-group" style="font-family: calibri;">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Save" data-ng-click="AddOrUpdate()" ng-disabled="adduserform.$invalid" class="btn btn-primary" />
</span>
</div>
</div>
</form>
</div>
</div>
</div>
@section scripts{
<script src="~/Scripts/AngularJsFiles/Mapping/ngMainDivisionDesignationMapController.js"></script>
}