Angular：几个带有重复选项的多个选择框答案

【问题标题】：Angular: several multiple select boxes with duplicate optionsAngular：几个带有重复选项的多个选择框
【发布时间】：2017-06-17 12:06:09
【问题描述】：

我有几个多选框，每个框可能有重复的选项。我需要它们工作，以便如果我在一个框中选择一个选项，相同的选项是否出现在其他框中，它也会被选中。我还需要它，这样如果我在另一个框中选择另一个选项，并且有重复项，它们也会被选中而不会丢失以前的选择。

例如，框 A 有 [a,b,c,d]，框 B 有 [a,q ,w,e]，而框 C 有 [d,x,c,v]。如果我选择 A.a，B.a 也会被选中。如果我选择 C.d，A.d 也会被选中。

任何提示将不胜感激。

【问题讨论】：

标签： angularjs

【解决方案1】：

我已经创建了一个小演示......看看它是否符合您的要求

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selected1" ng-options="x for x in option1" ng-change ="fireEvent1(selected1)">
</select>

<select ng-model="selected2" ng-options="y for y in option2" ng-change ="fireEvent2()">
</select>

<select ng-model="selected3" ng-options="z for z in option3" ng-change ="fireEvent3()">
</select>

</div>

</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.option1 = ["a", "b", "c","d"];

        $scope.option2 = ["a", "e", "f","g"];

    $scope.option3 = ["e", "s", "p","q"];

    $scope.fireEvent1 = function(selected1){
        for(var i=0;i< $scope.option2.length; i++){
            if($scope.option2[i] == selected1){
                $scope.selected2 = $scope.option2[0];
            }
        }
    }

});
</script>
</html>

【讨论】：