javascript - AngularJS Getting the value of a selected dropdown option in a variable - Stack Overflow

admin管理员组

文章数量:1377588

I have dropdown selection menu & want to send the dropdown selected value in request params of api. My code is...

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

Please give answer in angularJS if possible...

also how can I get the text input of tinymceeditor in a variable ?

$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 is..

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

I have dropdown selection menu & want to send the dropdown selected value in request params of api. My code is...

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

Please give answer in angularJS if possible...

also how can I get the text input of tinymceeditor in a variable ?

$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 is..

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

• javascript
• jquery
• angularjs
• drop-down-menu
• tinymce

Share Improve this question Follow edited Jun 13, 2016 at 7:52 srv asked Jun 13, 2016 at 7:49 srvsrv 6111 gold badge11 silver badge1111 bronze badges 2

• If u want us to give answer in angular js, kindly post your code which includes your angular controller atleast. – BlackBurn027 Commented Jun 13, 2016 at 8:03
• the code is in controller itself, its just a function which i need. – srv Commented Jun 13, 2016 at 8:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Bind a model in your select dropdown. Like below

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

In your controller you will get selected option

console.log($scope.inputReason)

Here is a sample code with a fiddle attached

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>

Fiddle link : http://jsfiddle/Td2NZ/1867/

My advise in this scenario is try to keep all input choices as a Js Object (Like $scope.shelf in this code) cause thats what Angular is built for rigid and robust handling of the data, eventually you could just load those options from a server or json file and not having to touch your HTML at all!

Hope this helps!

本文标签： javascriptAngularJS Getting the value of a selected dropdown option in a variableStack Overflow