问题：双选择列表移动所有项目

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