Question

我尝试设计一个包含两个选择框的表单元素，您可以从中移动项目，如此处所示http://plnkr.co/edit/2HjvYVEqkslGNSsErXr2?p=preview。

HTML：

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="foorm" novalidate>
      <select ng-model="leftSelect" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button ng-click="moveRight()">>></button>
      <button ng-click="moveLeft()"><<</button>
      <select ng-model="rightSelect" multiple>

      </select>
    </form>
  </body>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $window) {
  $scope.moveRight = function(){
    console.log($scope.leftSelect)
  };
});

我的问题是第二个最初的空白选择是未定义的，因为没有选择任何内容。我希望能够将元素从一个框移动到另一个框，并在表单提交时从第二个选择中获取元素是否被选中。

非常感谢任何想法

C

Answer 1

首先在你的控制器中创建rightSelect变量并用空数组初始化它。

$scope.rightSelect = [];

然后将您的功能修改为：

$scope.moveRight = function(){
  var left = $scope.leftSelect;
  for (var i = 0; i < left.length; i++) {
    var el =  left[i];
    if($scope.rightSelect.indexOf(el) < 0) { // check if value is not already stored
      $scope.rightSelect.push(el);
    }
  }
};

最后修改模板如下：

<form name="foorm" novalidate>
  <select ng-model="leftSelect" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button ng-click="moveRight()">>></button>
  <button ng-click="moveLeft()"><<</button>
  <select ng-model="toRemove" multiple>
    <option ng-repeat="el in rightSelect" value="{{el}}">{{el}}</option>
  </select>
</form>

通过这些更改，您将拥有包含所有选定值的rightSelect数组。请注意，第二个选择的ng模型不能正确选择这就是为什么我已经介绍了删除。

工作人员over here

实现双选框

1 个答案: