如何使用angularjs获取选择的所有选项答案

【问题标题】：how to get all options of select using angularjs如何使用angularjs获取选择的所有选项
【发布时间】：2015-06-02 23:52:40
【问题描述】：

我需要使用 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>

我有一个将数据从选择 1 传递到选择 2 的 e jquery。我需要所有选择 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

    });

【问题讨论】：

您在 Angular 应用程序中使用 jQuery 有什么原因吗？
否，jquery 在其他 js 文件 custom.js 中。仅使用 jquery 将 select 1 的数据传递给 select 2
你应该摆脱它。
不使用 jquery 并使用 angularjs 做所有事情？
是的，你不需要它。

标签： angularjs

【解决方案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。

【讨论】：

当然可以。如果它解决了您的问题，您可以接受答案。
一般来说，如果你觉得你需要使用 jQuery，你只需要学习如何在 Angular 中使用即可。
是的，我知道，但我是 Angular 的新手

【解决方案2】：

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

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

请参见下面的示例。

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

app.controller('crtl', function($scope) {

  $scope.list = ['A', 'B', 'C'];
  $scope.selectedValue = 'A';

});

<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>

ng-options docs

【讨论】：