this.push is not a function error while selecting 2nd or 3rd value from the drop down

Viewed 214

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>

2 Answers
Related