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

Question

我对角度很新，我有点陷入困境。 我有一个问题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个菜单。 每次单击都会显示所选选项。

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

不幸的是，我似乎无法弄清楚如何让这个工作。 任何人都可以帮我解决这个问题吗？

Answer 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>

Answer 2

您可以在第一个选择标记中添加“多个”属性。

<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个下拉菜单合并为一个？

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-02-01 12:55:15

解决方案2
1 2018-02-01 12:16:52

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-02-01 12:55:15

解决方案2 1 2018-02-01 12:16:52

解决方案1
2 已采纳 2018-02-01 12:55:15

解决方案2
1 2018-02-01 12:16:52