gpt4 book ai didi

javascript - 从 html 模板中获取选项文本

转载 作者:行者123 更新时间:2023-11-30 00:10:13 25 4
gpt4 key购买 nike

我正在开发一个程序,但我目前卡住了,试图从我的 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>

Demo

代码

$scope.options = [
{id: 1, value: 'eraser_tool_actionEvent'},
{id: 81, value: 'decrease_brush_size_actionEvent'},
]

关于javascript - 从 html 模板中获取选项文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36824235/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com