angularjs - 如何使用angularjs获取select的所有选项

Question

我需要使用angularjs获取多重选择的所有选项，有选择的也有没有选择的。选项是动态的。选择的选项并不总是相同。

HTML:

 <div class="row">
            <div class="form-group col-xs-5">
                <label>Select 1</label>
                <select multiple="multiple" class="form-control" id="origen" name="origen[]">
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
            </div>
            <div class="form-group col-xs-2 buttoms-left-right">
                <p>
                    <br />
                    <button type="button" class="btn btn-default" id="goright"><span class="glyphicon glyphicon-chevron-right"></span></button>
                </p>
                <p>
                    <button type="button" class="btn btn-default" id="goleft"><span class="glyphicon glyphicon-chevron-left"></span></button>
                </p>
            </div>
            <div class="form-group col-xs-5">
                <label>Select 2</label>
                <select multiple="multiple" class="form-control" id="destino" name="destino[]" ng-model="formData.tags"></select>
            </div>
        </div>

我有 e jquery 将数据从 select 1 传递到 select 2。我需要所有 select 2 选项，但使用 angularjs

jQuery(document).ready(function(){
    jQuery('#goright').click(function() { return !jQuery('#origen option:selected').remove().appendTo('#destino'); });
    jQuery('#goleft').click(function() { return !jQuery('#destino option:selected').remove().appendTo('#origen'); });

});

在 angularjs 中我有:

angular.module('formDS', ['ngAnimate', 'ui.router'])

// router configurations

.controller('formDSController', function($scope, $http) {
  
        $scope.formData = {};

        $scope.processForm = function() {
            console.log($scope.formData.tags); //return undefined
        };
        
// other code

    });

Answer 1

您需要将选项值存储在 Controller $scope 中。

Plunker

<label>Select 1</label>
        <select multiple="multiple" class="form-control" id="origen" name="origen[]">
            <option ng-repeat="opt in select1">{{opt}}</option>

         </select>
....
<label>Select 2</label>
        <select multiple="multiple" class="form-control" id="destino" name="destino[]" ng-model="select2">
          <option ng-repeat="opt in select1">{{opt}}</option>
        </select>

Controller :

app.controller('MainCtrl', function($scope) {
  $scope.select1 = ['A', 'B', 'C'];
});

绝对没有理由使用 jQuery。