如何将 3 个下拉菜单合并为一个？答案

【问题标题】：How to merge 3 drop down menus to one?如何将 3 个下拉菜单合并为一个？
【发布时间】：2018-07-11 17:47:05
【问题描述】：

我对 Angular 还是很陌生，但我有点被一个问题困住了。我有一个问题示例jsfiddle

function HelloCntl($scope) {
$scope.selectname1={};    
$scope.selectname2={};    
$scope.selectname3={};

$scope.filter1 = function(item){
  return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
};

$scope.filter2 = function(item){
  return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
};
$scope.filter3 = function(item){
  return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
};
$scope.friends = [
  {
    id:1,name: 'John'},
  {
    id:2,name: 'Mary'},
  {
    id:3,name: 'Mike'},
  {
    id:4,name: 'Adam'},
  {
    id:5,name: 'Julie'}
  
];


}


<div ng:app>
  <div ng-controller="HelloCntl">
  <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
    </li>
  </ul>
  <select ng-model="selectname1" 
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -    </option></select>
   <div>{{selectname1}}</div>

  <select ng-model="selectname2" 
     ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname2}}</div>
 
  <select ng-model="selectname3" ng-options="item as item.name for item in friends|filter:filter1|filter:filter2" ><option value="">- select -</option></select>
   <div>{{selectname3}}</div>
 </div>
</div>

我试图在单个下拉菜单中实现此代码，而不是 3 个菜单。每次单击都会显示所选选项。

我正在尝试的整体功能是创建一个包含项目的下拉菜单。选中这些项目后，将在下方使用删除按钮打印它们的名称。选择一个项目后，它应该自动从下拉列表中删除，以便不能进一步使用。并且应该可以在下面添加另一个项目（附加）

不幸的是，我似乎无法弄清楚如何让它发挥作用。谁能帮我解决这个问题？

【问题讨论】：

你不能在一个下拉菜单中拥有相同的代码，因为它们使用相互依赖的过滤器。否则你只需要：<select ng-model="s4" ng-options="i as i.name for i in friends" ></select><div>{{s4}}</div>
我试过这个，但它显示的错误太多。这是否也可以通过带有删除按钮的单个下拉菜单实现相同的功能？请你能在 jsfiddle 链接中显示这个吗？ @AlekseySolovey
如果你能描述你想要你的代码做什么会更好（edit your question）。目前，您的过滤器会阻止您在多个下拉菜单中选择一个人的姓名。如果您只有一个菜单，则此逻辑会失效，因为永远不会出现选择重复名称的情况
@AlekseySolovey 编辑了问题。我不明白它是否可以使用或不使用过滤器来实现

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

我认为这是您所要求的全面实施。您可以更改一些逻辑并适当调整我的示例：

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script srt="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>

<body>

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

    <div ng-controller="HelloCntl">
      <select ng-model="selected" ng-options="i as i.name for i in friends"></select>
       <button class="btn btn-danger" ng-click="delete(selected)">X</button>
       <div ng-show="selected" class="alert alert-info">Name: {{selected.name}} | ID: {{selected.id}}</div>
       <br>
      <input ng-model="new_selected">
      <button class="btn btn-info" ng-click="add(new_selected)">Add</button>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('HelloCntl', HelloCntl);

      function HelloCntl($scope) {
        $scope.friends = [
          {id:1,name: 'John'},
          {id:2,name: 'Mary'},
          {id:3,name: 'Mike'},
          {id:4,name: 'Adam'},
          {id:5,name: 'Julie'}
        ];
        $scope.selected = $scope.friends[0]; // initialise selection
        $scope.delete = function(x) {
          var y = $scope.friends.indexOf(x);
          $scope.friends.splice(y, 1);
        }
        var index = 6;
        $scope.add = function(x) {
          $scope.friends.push({
            id: index,
            name: x
          });
          index++;
          $scope.new_selected = '';
        }

      }
    </script>

</body>

</html>

【讨论】：

非常感谢您提供的信息性实施。我尝试在代码上使用我的预期逻辑，但我无法在彼此下方附加名称。这就是我认为该功能应该可以正常工作的内容。 [图片][1]。从下拉列表中单击 John 会在下方添加 john（也将其存储在数组中）以及将其从下拉列表中删除。从下方删除后，它会重新添加到下拉列表中。 [1]：lensdump.com/i/wXMGK

【解决方案2】：

你可以在你的第一个选择标签中添加一个“multiple”属性。

<select ng-model="selectname1" multiple
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname1}}</div>

如果我正确理解您的问题，至少这在 js 小提琴中有效。

您可以在这里找到，如何将多选限制为三个答案：HTML Multiselect Limit

【讨论】：

是否需要使用多个过滤器或过滤器？因为我是这个概念的新手。我实际上不需要3个下拉菜单。你能用任何在线IDE展示它吗？ @Kloker