Is AngularJS parsing the value incorrectly?

Question

I have an extremely simple example here: http://jsfiddle.net/daylight/hqHSr/

To try it, just go to the fiddle and click the [Add Item] button to add some rows.

Next, click the check box next to any item and you'll see something similar to the following:

Problem: Only Displays Numeric Part The problem is that the value should display the entire string shown in the row. In the example that means it should display: 86884-LLMUL. Notice that it only displays the numeric part of the value.

If you look at the control you'll see that I'm using an input of type="text". Also, if you look at the model (simpleItem) object you'll see that the one property it has is a string. The JavaScript for the model class looks like:

  function simpleItem(id) {
        this.id = id;
    }

My Attempt To Force to String Type When I generate each of the simpleItems I even go so far as to set them to a character when I call the constructor (just to force the id to be set to a string type).

Here's the code that initializes each of the simpleItem ids:

currentItem.id = getRandom(100000).toString() + "-" + getRandomLetters(5).toUpperCase();

You can see the rest of the code in the fiddle, but the thing is I generate a random value and concatenate the value together with a hyphen and 5 letters. It's just a silly little piece of code for this sample.

But now, here is the part where it gets really odd. If I simply change the hyphen - to another character like an uppercase X I get an error each time I click on the checkbox. Here's the changed code and the new output, which you can see at the revised fiddle: fiddle version 2

currentItem.id = getRandom(100000).toString() + "X" + getRandomLetters(5).toUpperCase();

Also, now if you open Dev Tools in your browser you'll see in the console that Angular is now reporting an error each time you click the [Add Item] button. It looks like:

Adding Single-quotes ?Fixes? It If you go up to the HTML and alter the following line from this:

ng-init="itemId ={{l.id.toString()}}" 

to this

ng-init="itemId ='{{l.id.toString()}}'" 

Now when you run it, the error will go away and it will work as you can see at the updated fiddle here: fiddle Version 3

Angular : Converts Hyphen to Minus Sign? You see, Angular seems to be converting it to a numeric, attempting to do math on it (parsing the hyphen as a minus sign) and then truncating the string portion. That all seems to work when I use a hyphen, but when I use a X then Angular chokes.

Here's what it looks like when you add the single-quotes - of course the angular errors in Dev Tools console go away too.

Angular Forces to Numeric Type? Why would this occur in Angular? It's as if it is attempting to force my string value to a numeric even though the INPUT element is type text and the JavaScript var is type string. Anyone have ideas about this?

What About the Asterisk (multiplication symbol)?

Right as I was completing this I wondered what would happen if I changed the - to a * and ran it again. This time I saw the error below, which is indicative that something is attempting to convert to numeric.

Answer 1

This is the expected behavior. Angular is merely interpolating the text you have in your scope into the ng-init expression using scope.$eval and then executing that expression. This has very little to do with what is the type of the input box of the rest of the surrounding context.

It is definitely not desirable that Angular should wrap any interpolation it does in quotes, it'll break its use in all other places such as class="my-class {{dynamic-class}}".