【问题标题】:AngularJS Getting the value of a selected dropdown option in a variableAngularJS在变量中获取选定下拉选项的值
【发布时间】:2016-06-13 07:49:15
【问题描述】:

我有下拉选择菜单并想在 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>

【问题讨论】:

  • 如果您希望我们在 Angular js 中给出答案,请发布您的代码,其中至少包含您的 Angular 控制器。
  • 代码在控制器本身,它只是我需要的一个功能。

标签: javascript jquery angularjs drop-down-menu tinymce


【解决方案1】:

在您的选择下拉列表中绑定model。如下所示

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

在您的控制器中,您将获得选定的选项

console.log($scope.inputReason)

【讨论】:

  • #Vineet 它显示未定义,如果可能的话,你能给我一个小提琴吗?
【解决方案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!

希望这会有所帮助!

【讨论】:

  • 如何将第一个值设置为默认选择...?
  • 只需将 ng-model 即 cart.fruit 指向 scope.shelf 的第一个对象,我已经更新了代码检查!
  • 感谢小提琴的帮助。顺便说一句,您的运行代码片段不起作用
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多