Question

简介：

我正在研究angularJs的打印指令。一些库（handsontable，custom-scoller等）让我创建自己的逻辑，而不是使用浏览器的默认打印。

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

对于输入，例如它非常简单，您只需要让jQuery为您提供值，但对于选择，您不能要求所选选项并获取其innerText。

问题：

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

对于输入，只需要$(input).val()就可以了但对于选择你不能问 $(select :selected) 因为它会给你错误的选择选项，那是因为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();

Answer 2

我找到了造成这种情况的原因。这是克隆人。我必须在克隆之前得到所有数据并且它有效。

Answer 3

您无需将列表的第一个元素分配给$ 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;
};
}]);

希望这会对你有所帮助。

如何使用角度outerHtml中的jQuery获取所选选项的innerText？

3 个答案: