выпуск: двойной selectlist перемещение всех предметов

Question

ниже код о двойном selectlist. как показано ниже.

Его работа как желание. Единственная проблема: , если я нажимаю на последний объект из списка справа (выберите «Список тем»), он перемещает все объекты в поле списка слева. Технически он должен перемещать только один щелчок (выбранный).

Любые предложения по этому вопросу?

код выглядит следующим образом

(function() { 
    'use strict'; 

    angular 
     .module("eSchoolSystem") 
     .directive('multiSelect',['$compile', '$log', multiSelect]) 

    function multiSelect($compile, $log) { 
     return { 
      restrict: 'E', 
      scope: { 
       name: '@', 
       selectedModel: '=', 
       availableModel: '=' 
      }, 
      /*template: '<select id="{{name}}-available" multiple ng-model="availableModel" ng-click="toSelected()" ng-options="a as a.subjectShortName for a in Model.available"></select>\n\n\ 
         <select id="{{name}}-selected" ng-click="toAvailable()" multiple ng-model="selectedModel" ng-options="s as s.subjectShortName for s in Model.selected"></select>', 
*/ 
      templateUrl:'app/class/html/dualMultiSelect.html', 
      compile: function() { 
       return { 
        pre: function($scope, $elem, $attr) { 

         var RefreshSelect = function(original, toFilter) { 
          var filtered = []; 
          angular.forEach(original, function(entity) { 
           var match = false; 
           for (var i = 0; i < toFilter.length; i++) { 
            if (toFilter[i]["subjectId"] === entity["subjectId"]) { 
             match = true; 
             break; 
            } 
           } 
           if (!match) { 
            filtered.push(entity); 
           } 
          }); 
          return filtered; 
         }; 

         var RefreshModel = function() { 
          /*$scope.selectedModel = $scope.Model.selected;*/ 
          $scope.selectedModel = angular.copy($scope.Model.selected); 
          /*$scope.availableModel = $scope.Model.available;*/ 
          $scope.availableModel = angular.copy($scope.Model.available); 
         }; 

         var Init = function() { 
          $scope.Model = { 
           available: $scope.availableModel, 
           selected: $scope.selectedModel 
          }; 

          $scope.selectedModel = []; 
          $scope.availableModel = []; 

          $scope.toSelected = function() { 

           $scope.Model.selected = $scope.Model.selected.concat($scope.availableModel); 
           $scope.Model.available = RefreshSelect($scope.Model.available, $scope.availableModel); 
           RefreshModel(); 
          }; 

          $scope.toAvailable = function() { 
           console.log("in here -x1") 
           console.log("x3-> " + JSON.stringify($scope.selectedModel)) 
           $scope.Model.available = $scope.Model.available.concat($scope.selectedModel); 
           $scope.Model.selected = RefreshSelect($scope.Model.selected, $scope.selectedModel); 
           RefreshModel(); 
          }; 

         }; 

         Init(); 
        } 
       }; 
      } 
     }; 

    } 

}()); 

Answer 1

Попробуйте удалить RefreshModel функции и обновления выбранных значений в toSelected и toAvailable:

$scope.toSelected = function() { 
    $scope.Model.selected = $scope.Model.selected.concat($scope.availableModel); 
    $scope.Model.available = RefreshSelect($scope.Model.available, $scope.availableModel); 
    $scope.selectedModel = $scope.availableModel; 
    $scope.availableModel = []; 
}; 

$scope.toAvailable = function() { 
    $scope.Model.available = $scope.Model.available.concat($scope.selectedModel); 
    $scope.Model.selected = RefreshSelect($scope.Model.selected, $scope.selectedModel); 
    $scope.selectedModel = []; 
    $scope.availableModel = $scope.selectedModel; 
};