selected listbox items to another listbox

Question

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>

}