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传递数据以选择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

    });

Answer 1

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

Answer 2

您可以指定控制器内的所有选项值。并使用ng-options指令在select元素中显示它。

您只能在控制器的$scope.list中获取所有可用选项。

请参阅以下示例。

＆＃13;

var app = angular.module('app', []);

app.controller('crtl', function($scope) {

  $scope.list = ['A', 'B', 'C'];
  $scope.selectedValue = 'A';

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="crtl">
    <select ng-options="item as item for item in list" ng-model="selectedValue"></select>
  </div>
</div>

＆＃13;

<强> ng-options docs

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

2 个答案: