从html模板获取选项文本

我正在开发一个程序，但我目前卡住了，试图从我的html中的选项获取文本。最近我读了很多帖子，大约plnkr，但是因为我使用的是电子和AngularJS，所以我不确定如何设置它。从html模板获取选项文本

例子： 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(); 
     }); 
    } 
});

来源

2016-04-24 Oliver Larsen

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

来源

2016-04-24 14:29:33

MHH还行，但不是有没有办法做到这一点不把我所有的值到范围有多大？这是非常长的atm ... onchange函数是需要的，因为我比较两个值相互进一步下来的HTML（这是不显示）比较价值与另一个脚本的另一个值。 –

好吧，所以我想通了，我修改了你的答案，但因为它是一个正确的变量的问题..我会给你的标志;）http://plnkr.co/edit/ACEUnvtu0EXdehoM6sle ？p = info - 我最终在.js文件中完成了它。我认为它不会起作用，但它确实如此谢谢。 –

从html模板获取选项文本

回答

相关问题