我正在开发一个程序，但我目前卡住了，试图从我的 html 的选项中获取文本。我最近读了很多关于 plnkr 的文章，但由于我使用的是 electron 和 AngularJS，所以我不确定如何设置它。
例子: http://plnkr.co/edit/0BzvwOIQUdfS3KfKUtcS?p=preview
在示例中，结果应该是当单击“确定”按钮时所选选项的文本将导出到 json，但它仅导出值，例如。 Action :1
导出的 json atm。看起来像这样:
{
"keybindings": [
{
"keyString": "B",
"action": "3",
"shiftKey": true
}
]
}
但我正在尝试得到
{
"keybindings": [
{
"keyString": "B",
"action": "eraser_tool_action",
"shiftKey": true
}
]
}
我已经缩短了代码，但应该有 81 个选项。
这是模板的代码:
<!DOCTYPE html>
<html>
<head ng-app="app">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="modal-dialog">
<form class="modal-content">
<div class="form-group">
<label>Key</label>
<select for="entry" class="form-control" ng-model="entry.actionEvent" onchange="CheckDesc(this.value);">
<option value="0">-- choose an action --</option>
<option value="1" ng-model="entry.actionEvent">eraser_tool_actionEvent</option>
<option value="81" ng-model="entry.actionEvent" >decrease_brush_size_actionEvent</option>
</select>
<div class="form-action">
<button type="button" ng-click="close()" id="cancel-entrywindow" class="btn btn-form btn-default">Close</button>
<button type="button" ng-click="addEntry(entry)" class="btn btn-form btn-primary">OK</button>
</div>
</form>
</div>
</script>
</body>
</html>
这是 script.js
var app = angular.module('controllers', ['angularModalService']);
app.controller('IndexCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.entries = db('keybindings').cloneDeep();
$scope.removeEntry = function(entry){
var query = {keyString: entry.keystring, action: entry.actionEvent, shiftKey: entry.modifier1, ctrlKey: entry.modifier2, altKey: entry.modifier3};
db('keybindings').remove(query);
$scope.entries = db('keybindings').cloneDeep();
};
}
]);
app.controller('EntryCtrl', ['$scope', 'close', '$routeParams', '$location',
function($scope, close, $routeParams, $location){
$scope.entry = {
'keyString': '',
'action': '',
"shiftKey": false,
"ctrlKey": false,
"altKey": false
};
$scope.addEntry = function(entry){
var t = $scope.entry;
alert('works');
var data = {keyString: t.keystring, action: t.actionEvent, shiftKey: t.modifier1, ctrlKey: t.modifier2, altKey: t.modifier3};
if(data === null)
{
alert('Insert something');
}
else{
db('keybindings').push(data);
}
$location.path("/");
};
$scope.close = close;
}
]);
app.controller('IndexCtrl', function($scope, ModalService) {
$scope.showModal = function() {
ModalService.showModal({
templateUrl: 'addentry.html',
controller: "EntryCtrl"
}).then(function(modal) {
modal.element.modal();
});
}
});
最佳答案
ng-model 不应该在 options 元素上，也不要使用 onchange 函数，这也不需要.最好通过在 Controller 中使用 options 数组，然后使用 ng-options 指令呈现选择下拉列表，以 Angular 方式实现它。
<select for="entry" class="form-control" ng-model="entry.actionEvent"
ng-options="option.id as option.value for option in options">
<option value="0">-- choose an action --</option>
</select>
代码
$scope.options = [
{id: 1, value: 'eraser_tool_actionEvent'},
{id: 81, value: 'decrease_brush_size_actionEvent'},
]
关于javascript - 从 html 模板中获取选项文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36824235/