問題：雙選擇列表移動所有項目

Question

下面的代碼是關於雙選擇列表。如下圖所示。

它的工作作爲慾望。唯一的問題是，如果我從右側的列表框中選擇最後一個主題（選擇主題列表），它將移動到左側列表框。從技術上講，它只應該移動點擊（選定）的一個主題。

任何建議來解決這個問題？

代碼是如下

(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; 
};