This.push is not a functional error when selecting the second or third value from the dropdown
I am trying to extract items from a dropdown and the list box is populated according to the selection. Then the value selected from one list box must be populated in another list box. i. from from Available to Selected. when choosing "Development" its working penalty. But other than that, for every selection, its throwing an error: 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>
+3
source to share
2 answers
I think the problem is here:
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]);
Usage this.push(value);
as it this
is currently a function angular.forEach()
. Replace with the this
actual name of the array.
+1
source to share