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

Question

我是 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 个菜单。每次单击都会显示所选选项。

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

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

Answer 1

您可以将 "multiple" 属性添加到您的第一个 select 标签。

<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 fiddle 中有效，如果我理解你的问题的话。

在这里您可以找到如何将倍数 select 限制为三个答案：HTML Multiselect Limit

Answer 2

我认为这完全符合您的要求。您可以更改一些逻辑并适当调整我的示例：

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

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

How to merge 3 drop down menus to one?

html

javascript

angularjs

angularjs-ng-repeat