從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模板獲取選項文本

回答

相關問題