Question

我正在开发一个程序，但我现在卡住了，试图从我的html选项中获取文本。我最近读了很多关于 plnkr 的帖子，但由于我正在使用电子和AngularJS，我不知道如何设置它。

实施例： http://plnkr.co/edit/0BzvwOIQUdfS3KfKUtcS?p=preview

在该示例中，结果应该是在单击“确定”按钮时将所选选项的文本导出到json，但它仅导出值，例如。 行动：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();
        });
    }
});

Answer 1

ng-model不应该在options元素上，也不要使用onchange函数，这也不是必需的。最好通过在控制器和放大器中使用options数组以角度方式实现它。然后使用ng-options指令渲染选择下拉列表。

<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'},
]

从html模板中获取选项文本

1 个答案: