AngularJS <select> DOM markup

Question

I'm curious when using ng-options and ng-model to set a selected item for the model why the Angular DOM markup isn't showing the correct value selected but is still displaying the correct value.

  $scope.myArray = [{ value: 'Yes' }, { value: 'No' }];

  $scope.cboModel.myArrayValSel = // Json pulled and value set from JS proxy call;

  <select ng-model="cboModel.myArrayValSel " ng-options="val.value as val.value for val in myArray " />

The DOM markup is rendering:

<option selected="selected" value="0" label="Yes">Yes</option>
<option value="1" label="No">No</option>

So, if the value comes back as 'No' for the object model property it is displaying this in the dropdown accordingly in the browser but I don't understand why it is not setting the selected="selected" attribute on the second item in the array. In this instance on

<option value="1" label="No">No</option>.

If I was just concerned with the browser output this would be more of a curiosity but I am converting the HTML to a PDF. The PDF library is rendering the value that has the selected attribute set so there is an obvious disconnect between what is displayed in the browser and what is output in the PDF.

attributes and properties are not the same thing. Some properties will not be visible as attributes in the live html. How are you converting the html to pdf? — charlietfl
– charlietfl, Commented Apr 24, 2015 at 1:59
Right, but my curiosity is how angular is deriving the selected="selected" attribute mark up in the DOM. I guess I was expecting that Angular would add this to the element bound to the selected item in the array ng-.model="cboModel.myArrayValSel " — inspiredcoder
– inspiredcoder, Commented Apr 24, 2015 at 2:02
I am converting this to PDF via a post to a Web API service. I am using NRECO.PdfGenerator to generate the PDF resource. I have a subsequent get request that pulls down the resource from the API. — inspiredcoder
– inspiredcoder, Commented Apr 24, 2015 at 2:06
just a really bad idea to work from element attributes when it is the element properties that matter. You could process the html first to set the attributes as soon as you pull it from the DOM — charlietfl
– charlietfl, Commented Apr 24, 2015 at 2:23

Phil · Accepted Answer · 2015-04-24 02:39:22Z

3

The selected attribute would only effect the initial page load (based on the value assigned to $scope.cboModel.myArrayValSel).

If you want to see real values in the <option> value attributes, use a track by expression, eg

ng-options="val.value for val in myArray track by val.value"

Plunker

Note, for this to work, the bound ng-model must be an actual value from the array, not a scalar property (like 'Yes' or 'No').

You'll note in my example that I have

$scope.choice = $scope.myArray[0];

edited Apr 24, 2015 at 2:39

answered Apr 24, 2015 at 2:17

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rathish Cholarajan Over a year ago

Interesting. Good to know. Just curious to know why changing the initial "Yes" to "No" by selecting "No" in the drop down does not add the selected attribute to the "No" option.

Phil Over a year ago

To re-iterate what's already been mentioned in the comments above, attributes are different to properties

inspiredcoder Over a year ago

I need to read up a little more on the track by. I'm assuming this is adding a watch under the hood to the selected value model. This particular form has a couple hundred drop down's so I'm assuming it could lend itself to some performance concerns.

Phil Over a year ago

@inspiredcoder not adding a watch, just changing what is watched. The default track by uses $index (or $id or something) which is why the default values are 0, 1, etc

inspiredcoder Over a year ago

This really explains why the attribute is showing this way. I went ahead and simply added an element for these values and am parsing it server side with html agility pack to get the PDF output I am looking for. Thanks.

Collectives™ on Stack Overflow

AngularJS <select> DOM markup

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related