Angularjs 中具有删除功能的动态下拉列表

Question

我正在尝试实现一个动态下拉菜单，我希望它看起来像 Image。

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 = '';
        }

从下拉列表中单击 John 会将 john 添加到下方（还将其存储在数组中）并从下拉列表中将其删除。从下面删除后，它会重新添加到下拉列表中。

由于 John Mary Adam 和 Mike 已经在下方（也在数组中），因此他们已从下拉列表中删除（只有 Julie 现在保留在下拉列表中）。从下面删除它们后，它们将重新添加到下拉列表中。谁能帮我在 fiddle 上实现 AngularJS？

Answer 1

虽然我对您上一个问题的回答足够好，但可以编辑。您只需要 ng-repeat 即可一次显示所有内容。这是一个旧的例子：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<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>
      <div>
        <!-- ADD class="alert alert-info" HERE to wrap all boxes with the blue background -->
        <!-- ng-repeat was added to show all at once -->
        <!-- ng-show was modified to hide already selected name -->
        <div ng-repeat="x in friends" ng-show="friends && x!=selected" class="alert alert-info">Name: {{x.name}} | ID: {{x.id}} <button class="btn btn-danger" ng-click="delete(x)">X</button></div>
        <br>
      </div>
    </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>

更新

我已经修正了逻辑，可以满足你的需要。花了一些时间阅读您在两个地方添加和删除名称的分步过程，但现在它按预期工作。这是一个片段：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<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-success" ng-click="add(selected)">Add</button>
      <div>
        <div ng-repeat="x in selected_friends" ng-show="selected_friends" class="alert alert-info">
          Name: {{x.name}} | ID: {{x.id}}
          <button class="btn btn-danger" ng-click="delete(x)">X</button>
          <button class="btn btn-success" ng-click="add_back(x)">Add back</button>
        </div>
        <br>
      </div>
    </div>

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

      function HelloCntl($scope) {
        $scope.selected_friends = [];
        $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.selected_friends.indexOf(x);
          $scope.selected_friends.splice(y, 1);
        }
        $scope.delete2 = function(x) {
          var y = $scope.friends.indexOf(x);
          $scope.friends.splice(y, 1);
        }
        var index = 6;
        $scope.add = function(x) {
          if ($scope.selected_friends.indexOf(x) == -1) {
            $scope.delete2(x);
            $scope.selected_friends.push(x);
          }
        }
        $scope.add_back = function(x) {
          $scope.delete(x);
          $scope.friends.push(x);
        }
      }
    </script>

</body>

</html>

Angularjs 中具有删除功能的动态下拉列表

Dynamic Dropdown in Angularjs with delete function

html

javascript

css

angularjs

angular-ui-bootstrap

更新