CODEWITHSUNDEEP
javascriptjqueryangularjs
Dvir
Dvir

Reputation: 3339

How to get the innerText of selected option with jQuery from angular outerHtml?

Brief:

I'm working on a printing directive for angularJs. Some libraries (handsontable, custom-scoller, etc..) made me to create my own logic instead of using the default printing of the browser.

I find out that the best option is to get the outerHtml of the page and then parse it with jQuery and convert some grids into tables and scrollers into expandable divs. However, everything works perfectly except selects element.

For inputs for example it is very simple, You just ask jQuery to give you the value, but for selects you can't ask for the selected option and get its innerText.

The Question:

How can I fetch from select element that created by ng-options and get the selected option innerText by outerHtml?

For inputs, it's pretty easy just ask for $(input).val() But for select you can't ask for $(select :selected) because it'll gives you wrong selected option and that's because how angularJs works with selects and objects.

Extra Information:

If you'll look on the generated html code by angularJs ng-options it'll look like that:

<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>

As you can see, on the Screen the selected option is Gifts, but on the html code actually the Prices is the one that selected. So that's why I can't use jquery to get the selected option innerText. AngularJs doesn't update the html dom of the selected element and causing it to be impossible to get its values with the html source only.

enter image description here

I created a demonstration of the situation on jsFiddle. Just play with the selectBox, click on getOuterHtml button and see that nothing got change.

Any suggestions?

Upvotes: 0

Views: 862

Answers (3)

Dvir
Dvir

Reputation: 3339

I found what caused the situation. It was the clone. Just had to get all the data before I clonning and it works.

Upvotes: 0

Nitin Garg
Nitin Garg

Reputation: 896

You don't need to assign 1st element of the list to $scope.type. And you can directly fetch selected element from $scope.type.

I have created JSFiddle to demonstrate the same.

<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>

AND

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;
};
}]);

Hope this helps you.

Upvotes: 0

The Maniac
The Maniac

Reputation: 2626

You can use the value to select the option, then get its html: http://jsfiddle.net/bb23u1vy/1/

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

Upvotes: 1

Related Questions