Как получить innerText выбранной опции с jQuery из углового внешнегоHtml?

Question

Коротко:

Я работаю над директивой печати для angularJs. Некоторые библиотеки (handsontable, custom-scoller и т. Д.) Заставили меня создать свою собственную логику вместо использования стандартной печати браузера.

Я выяснил, что лучший вариант - получить внешний HTML-файл страницы, а затем разобрать его с помощью jQuery и преобразовать некоторые сетки в таблицы и скроллеры в расширяемые div. Однако все работает отлично, кроме элемента select.

Для ввода, например, очень просто, вы просто запрашиваете jQuery, чтобы дать вам значение, но для выбора вы не можете запросить выбранную опцию и получить ее innerText.

Вопрос:

Как я могу извлечь из отборного элемента, который создан нг-варианты и получить выбранный вариант InnerText по outerHtml?

Для входов, это довольно легко просто попросить $(input).val() Но для выбора вы не можете спросить для $(select :selected) , потому что он будет дает неправильно выбранный вариант и это потому, что, как angularJs работает с выбирает и объектов.

Экстренная Информация:

Если вы будете смотреть на сгенерированный HTML код на angularJs нг-вариантов это будет выглядеть так:

<select ng-model="type" ng-options="item.value as item.text for item in list" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched"> 
    <option value="number:1" label="Prices" selected="selected">Prices</option> 
    <option value="number:2" label="Gifts">Gifts</option> 
    <option value="number:3" label="Total">Total</option> 
</select> 

Как вы можете видеть на экране выбранный вариант - «Подарки», но на самом html-коде цены выбраны. Так вот почему я не могу использовать jquery, чтобы получить выбранную опцию innerText. AngularJs не обновляет html dom выбранного элемента и не дает возможности получить его значения только с помощью источника html.

Я создал демонстрацию ситуации на jsFiddle. Просто играйте с selectBox, нажмите на кнопку getOuterHtml и убедитесь, что ничего не изменилось.

Любые предложения?

Answer 1

Вы можете использовать значение для выбора опции, а затем получить его HTML: http://jsfiddle.net/bb23u1vy/1/

var val = clone.find('select').val(); 
$scope.html = clone.find('select option[value="' + val + '"]').html(); 

Answer 2

я нашел то, что вызвало ситуацию. Это был клон. Просто мне нужно было получить все данные, прежде чем я буду клонироваться, и это сработает.

Answer 3

Вам не нужно назначать 1-й элемент списка $ scope.type. И вы можете напрямую извлечь выбранный элемент из $ scope.type.

Я создал JSFiddle, чтобы продемонстрировать то же самое.

<div ng-controller="MyCtrl"> 
    <select ng-model="type" ng-options="item.value as item.text for item in  list"></select> 
    <button ng-click=getHtml()> 
Get OuterHtml() 
</button> 
<code> 
{{html}} 
</code> 
</div> 

<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> 

И

var myApp = angular.module('myApp',[]); 

myApp.controller('MyCtrl', ['$scope', function($scope) { 
$scope.list = [ 
    {value: 'Prices', text: 'Prices'}, 
    {value: 'Gifts', text: 'Gifts'}, 
    {value: 'Total', text: 'Total'} 
]; 

$scope.getHtml = function(){ 
    $scope.html = $scope.type; 
}; 
}]); 

Надеется, что это помогает.