使用 angular js 从 multi select 框中添加或删除 selected 元素

Question

我想显示一个动态 table，但是 table 列我想在运行时 select。为此，我使用了两个 multi select 框，在第一个 Multi select 中使用 Json.

加载所有列名

现在我的要求是，我想将第一个 multi select 框中的 selected 列名称添加到第二个 multi select 框中。如果需要，我还想从第二个 multi select 框中删除。

我拿了两个按钮，一个用于添加，另一个用于删除。任何人都可以帮助我满足这一要求。我如何使用 AngularJs 来做到这一点？请参考附图以明确我的要求。提前致谢..

Answer 1

angular.module('app', []).controller('MoveCtrl', function($scope) {

  $scope.available = [];
  $scope.selected = [];

  $scope.moveItem = function(items, from, to) {

    angular.forEach(items, function(item) {
      var idx = from.indexOf(item);
      from.splice(idx, 1);
      to.push(item);
    });

    // clear selection
    $scope.available = "";
    $scope.selected = "";
  };

  $scope.moveAll = function(from, to) {

    angular.forEach(from, function(item) {
      to.push(item);
    });
    from.length = 0;
  };

  $scope.selectedclients = [];
  $scope.availableclients = [{
    id: 1,
    name: 'Bob'
  }, {
    id: 2,
    name: 'Sarah'
  }, {
    id: 3,
    name: 'Wayne'
  }, {
    id: 4,
    name: 'Pam'
  }];

});

input {
  display: block;
  margin: 0 auto;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller="MoveCtrl">
  <h1>Move items between Select boxes</h1>

  <div style="float:left">
    <div>Available Clients</div>
    <div>
      <select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 100px;height:100px"></select>
    </div>
  </div>
  <div style="float:left; width: 100px; text-align:center">
    <div>&nbsp;</div>
    <input id="moveright" type="button" value=">" ng-click="moveItem(available, availableclients,selectedclients)" />
    <input id="moverightall" type="button" value=">>" ng-click="moveAll(availableclients,selectedclients)" />
    <input id="move left" type="button" value="<" ng-click="moveItem(selected, selectedclients,availableclients)" />
    <input id="moveleftall" type="button" value="<<" ng-click="moveAll(selectedclients,availableclients)" />
  </div>

  <div style="float:left">
    <div>Selected Clients</div>
    <div>
      <select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 100px;height:100px"></select>
    </div>
  </div>
  <div style="clear:both">
    <br/>
    <div>Selected Clients: {{selectedclients}}</div>
    <div>Available Clients: {{availableclients}}</div>
    <div>Selected: {{selected}}</div>
    <div>Available: {{available}}</div>
  </div>
</body>

</html>

基础归功于 AngularJS moving items between two select list。但是，它只会在选择多个项目时移动单个项目。

使用 angular js 从 multi select 框中添加或删除 selected 元素

Add or Remove selected elements from multi select box using angular js

angularjs

angular-ui-bootstrap