2016-04-24 4 views
2

Я разрабатываю программу, но сейчас я застреваю, пытаясь получить текст из опции из моего html. В последнее время я читал много сообщений о plnkr, но поскольку я использую электрон и AngularJS, я не уверен, как настроить его.Получить текст опции из html-шаблона

Пример: http://plnkr.co/edit/0BzvwOIQUdfS3KfKUtcS?p=preview

В примере, результат должен быть, что текст выбранной опции будет экспортирована в формат JSON при нажатии на кнопку OK, но это только экспорт значение, напр. деятельность: 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(); 
     }); 
    } 
}); 

ответ

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

Mhh хорошо, но не способ сделать это, не подвергая все мои ценности в область? это ужасно долго ... Функция onchange нужна, так как я сравниваю два значения друг с другом дальше по html (который не показан), чтобы сравнить значение с другим значением из другого сценария. –

+0

Итак, я понял, я немного изменил ваш ответ, но поскольку это вопрос получения правильной переменной. Я дам вам знак для этого;) http://plnkr.co/edit/ACEUnvtu0EXdehoM6sle ? p = info - Я все равно делал это в файле .js. Я думал, что это не сработает, но это так. –

Смежные вопросы