I am trying to fetch elements from the drop-down and the list-box is populated according to the selection. Then the value selected from one list box needs to be populated in another list-box. i.e from Available to Selected. while selecting Development its working fine. But except that for every selection its giving error as : this.push is not a function
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, $window) {
// $scope.selectFaIndex = 0;
$scope.SelectedAvailItems = [];
$scope.SelectedSelectedListItems = [];
$scope.SelectedListItems = [
[]
];
$scope.names = ["Development", "Testing", "Database"];
$scope.AvailableListItems = [
[]
];
$scope.update = function(){
var selectedItem=$scope.user.Specialization;
console.log(selectedItem);
if(selectedItem=="Development"){
$scope.selectFaIndex = 0;
}
else if(selectedItem=="Testing"){
$scope.selectFaIndex = 1;
}
else if(selectedItem=="Database"){
$scope.selectFaIndex = 2;
}
/*$scope.item[id+'Date'] = new Date();*/
};
$scope.DefaultListItems = [
[{
email: 'john.banks@rj.com'
}, {
email: 'jim.chevy@rj.com'
}, {
email: 'ralph.stocks@rj.com'
}],
[{
email: 'jim.sums@rj.com'
}, {
email: 'jim.camaro@rj.com'
}, {
email: 'jeff.money@rj.com'
}],
[{
email: 'fred.pays@rj.com'
}, {
email: 'steve.acura@rj.com'
}, {
email: 'ryan.bills@rj.com'
}]
];
angular.copy($scope.DefaultListItems, $scope.AvailableListItems);
$scope.btnRight = function () {
//move selected.
angular.forEach($scope.SelectedAvailItems, function (value, key) {
console.log("selected available items: " );
console.log( $scope.SelectedAvailItems);
console.log("Values" + value);
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].email == value.email) {
$scope.AvailableListItems[$scope.selectFaIndex].splice(i, 1);
}
}
});
$scope.SelectedAvailItems = [];
};
$scope.btnLeft = function () {
//move selected.
angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
console.log($scope.SelectedSelectedListItems);
console.log(value);
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].email == value.email) {
$scope.SelectedListItems[$scope.selectFaIndex].splice(i, 1);
}
}
});
$scope.SelectedSelectedListItems = [];
};
});
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="app/controller/test.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
Specialization : <select id="specializationId" ng-model="user.Specialization"
ng-change="update()" ng-required="true">
<option value="">Select---</option>
<option ng-repeat="x in names">{{x}}</option>
</select>
<div style="margin-left: 90px;">
<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</span>
</td>
<td></td>
<td style="background-color: #666699"><span
style="margin-left: 5px; color: white; background-color: #666699; width: 250px;">Selected</span>
</td>
<tr>
<tr>
<td>
<div>
<select multiple id="availabelist" size="10"
style="width: 275px" ng-change="OnAvailableChange()"
ng-model="SelectedAvailItems"
ng-options="i as i.email for i in AvailableListItems[selectFaIndex] | orderBy:'email'"></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 as i.email for i in SelectedListItems[selectFaIndex] | orderBy:'email'"></select>
</div>
</td>
<tr></tr>
</table>
</div>
</div>
</body>
</html>