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

Question

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

javascripthtmlangularjsangularjs-ng-repeat

3

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

我正试图将这段代码实现在一个下拉菜单中，而不是三个菜单。每次点击都会显示所选选项。

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

不幸的是，我似乎无法弄清楚如何使其工作。有人能帮我吗？

- dracarys3

由于它们使用相互依赖的过滤器，因此您不能在单个下拉列表中具有相同的代码。否则，您只需要：<select ng-model="s4" ng-options="i as i.name for i in friends"></select><div>{{s4}}</div> - Aleksey Solovey

我尝试过这个，但是它显示了太多的错误。是否可能只使用一个下拉菜单和一个删除按钮来实现相同的功能？请问您能否在jsfiddle链接中展示一下？@AlekseySolovey - dracarys3

最好能描述一下您想让代码做什么（编辑您的问题）。目前，您的筛选器会防止您在多个下拉菜单中选择同一个人的姓名。如果只有一个菜单，这种逻辑就不再适用，因为您永远不会出现选择重复姓名的情况。 - Aleksey Solovey

@AlekseySolovey 编辑了这个问题。我不明白它是否可以有或没有过滤器来实现。 - dracarys3

2个回答

1

您可以在第一个选择标签中添加“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 fiddle中这个方法是有效的。

在这里，你可以找到如何将多选限制为三个答案的方法：HTML多选限制

- Kloker

是否需要使用多个过滤器或根本不需要过滤器？因为我对这个概念还很陌生。实际上，我并不需要3个下拉框。您能否使用任何在线IDE展示一下？@Kloker - dracarys3

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aleksey Solovey · Accepted Answer

我认为这是您所要求的完整实现。您可以更改部分逻辑并相应地调整我的示例：

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