javascript - 如何使用jQuery从 Angular outerHtml获取所选选项的innerText？

Question

简介:

我正在为 angularJs 制定打印指令。一些库(handsontable、custom-scoller 等)让我创建自己的逻辑，而不是使用浏览器的默认打印。

我发现最好的选择是获取页面的outerHtml，然后用jQuery 解析它，并将一些网格转换为表格，将滚动条转换为可扩展的div。但是，除了选择元素之外，一切都运行良好。

对于输入，例如，它非常简单，您只需要求 jQuery 给您值，但对于选择，您不能询问所选选项并获取其内部文本。

问题:

如何从ng-options创建的选择元素中获取并通过outerHtml获取所选选项innerText？

对于输入，非常简单，只需要求$(input).val()但对于 select 你不能问对于 $(选择:已选择)因为它会给你错误的选择选项，这是因为 angularJs 如何处理选择和对象。

额外信息:

如果您查看 angularJs ng-options 生成的 html 代码，它将如下所示:

<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();