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

2023年7月31日 149次阅读

我需要使用
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传递数据选择2.我需要所有选择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

    });

最佳答案 您需要将选项值存储在控制器$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>

控制器：

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

绝对没有理由使用jQuery.

点赞