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

Question

I'm pretty new to angular and I'm kind of stuck with an issue. 我对角度很新，我有点陷入困境。 I have a sample example of my problem jsfiddle 我有一个问题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>

I am trying to implement this code in a single drop down menu, rather than 3 menus. 我试图在一个下拉菜单中实现此代码，而不是3个菜单。 With each click showing the selected option. 每次单击都会显示所选选项。

The overall functionality I am trying is creating a dropdown menu with items. 我正在尝试的整体功能是创建一个包含项目的下拉菜单。 These items when selected will print their names below with a delete button. 选择这些项目后，将使用删除按钮在下面打印其名称。 Upon selecting an item, it should be automatically removed from the dropdown so that it can't be used further. 选择项目后，应自动从下拉列表中删除该项目，以使其无法进一步使用。 And adding another item should be possible further below (append) 并且可以在下面进一步添加另一个项目（追加）

Unfortunately I can't seem to figure out how to get this to work. 不幸的是，我似乎无法弄清楚如何让这个工作。 Can anyone help me out with this ? 任何人都可以帮我解决这个问题吗？

Answer 1

I think this the full implementation of what you have requested. 我认为这是你所要求的全面实施。 You can change some of the logic and adjust my example appropriately: 您可以更改一些逻辑并适当调整我的示例：

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

You may just add an "multiple" attribute to your first select tag. 您可以在第一个选择标记中添加“多个”属性。

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

At least this works in the js fiddle, if I understood your problem correctly. 如果我正确理解你的问题，至少这在js小提琴中起作用。

And here you can find, how to limit the multiple select to three answers: HTML Multiselect Limit 在这里你可以找到，如何将多个选择限制为三个答案： 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