AngularJS 获取变量中选定下拉选项的值
AngularJS Getting the value of a selected dropdown option in a variable
我有下拉选择菜单,想在 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>
在 select 下拉列表中绑定 model
。喜欢下面
<select class="form-control" id = "SelectionInput_reason" data-ng-model="inputReason">
在您的控制器中,您将获得 selected 选项
console.log($scope.inputReason)
这是附有 fiddle 的示例代码
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.shelf = [{
'name': 'Banana',
'value': ''
}, {
'name': 'Apple',
'value': ''
}, {
'name': 'Pineapple',
'value': ''
}, {
'name': 'Blueberry',
'value': ''
}];
$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.net/Td2NZ/1867/
在这种情况下,我的建议是尝试将所有输入选项保留为 Js 对象(如此代码中的 $scope.shelf),因为这就是 Angular 为严格和稳健地处理数据,最终你可以只从服务器或 json 文件加载这些选项,而根本不必触摸你的 HTML!
希望对您有所帮助!
我有下拉选择菜单,想在 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>
在 select 下拉列表中绑定 model
。喜欢下面
<select class="form-control" id = "SelectionInput_reason" data-ng-model="inputReason">
在您的控制器中,您将获得 selected 选项
console.log($scope.inputReason)
这是附有 fiddle 的示例代码
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.shelf = [{
'name': 'Banana',
'value': ''
}, {
'name': 'Apple',
'value': ''
}, {
'name': 'Pineapple',
'value': ''
}, {
'name': 'Blueberry',
'value': ''
}];
$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.net/Td2NZ/1867/
在这种情况下,我的建议是尝试将所有输入选项保留为 Js 对象(如此代码中的 $scope.shelf),因为这就是 Angular 为严格和稳健地处理数据,最终你可以只从服务器或 json 文件加载这些选项,而根本不必触摸你的 HTML!
希望对您有所帮助!