个人中心
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
文章推荐： javascript - NPM:取决于本地 ES6 模块(无需转译)
文章推荐： java - Birt 报告重复行 - 表
文章推荐： PHP base64编码不同的结果
文章推荐： javascript - 使用 ES6 在 React 中映射对象内部的数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com