AngularJS在变量中获取所选下拉选项的值

Question

我有下拉选择菜单，并想在api的请求参数中发送下拉选择的值。 我的代码是...

<select class="form-control" id = "SelectionInput_reason">
   <option name="careerType" value="type_1">Career</option>
   <option name="examType" value="type_2">Exams</option>
</select>

getValue = function() {
    var selectedValue = this.value;
    var selectedText = this.options[this.selectedIndex].getAttribute('name');
    alert(selectedValue); 
    alert(selectedText); 
} 
document.getElementById('SelectionInput_reason').addEventListener('change', getValue );

如果可能，请用angularJS给出答案...

还如何在变量中获取tinymceeditor的文本输入？

$scope.tinymceModel = 'Initial content';
        $scope.getContent = function() {
          console.log('Editor content:', $scope.tinymceModel);
        };
        $scope.setContent = function() {
          $scope.tinymceModel = 'Time: ' + (new Date());
        };
        $scope.tinymceOptions = {
          selector: 'textarea',
          //plugins: 'link image code',
          toolbar: ' bold italic | undo redo | alignleft aligncenter alignright | code'
        };

HTML是..

<div class="form-group">
     <textarea ui-tinymce="tinymceOptions" id="jander" ng-model="tinymceModel" placeholder="Ask your question" class="form-control"></textarea>
 </div>

Answer 1

在您选择的下拉列表中绑定model 。 像下面

<select class="form-control" id = "SelectionInput_reason" data-ng-model="inputReason">

在您的控制器中，您将获得选择的选项

console.log($scope.inputReason)

Answer 2

这是附加了小提琴的示例代码

 var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function($scope) { $scope.shelf = [{ 'name': 'Banana', 'value': '$2' }, { 'name': 'Apple', 'value': '$8' }, { 'name': 'Pineapple', 'value': '$5' }, { 'name': 'Blueberry', 'value': '$3' }]; $scope.cart = { 'fruit': $scope.shelf[0] }; }); 

 <div ng-controller="MyCtrl"> <div> Fruit List: <select ng-model="cart.fruit" ng-options="state as state.name for state in shelf"></select> <br/> <tt>Cost & Fruit selected: {{cart.fruit}}</tt> </div> </div> 

小提琴链接： http : //jsfiddle.net/Td2NZ/1867/

在这种情况下，我的建议是尝试将所有输入选择都保留为Js对象（如此代码中的$ scope.shelf），这就是Angular为数据的刚性和健壮处理而构建的功能，最终您可以从服务器或json文件，根本不必触摸HTML！

希望这可以帮助！