1 Replies - 633 Views - Last Post: 03 July 2013 - 09:23 AM

#1 Viper2KX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 195
  • Joined: 25-January 09

Learning AngularJS

Posted 27 June 2013 - 09:49 PM

I'm trying to do 2 things in this jsFiddle - http://jsfiddle.net/YrYqL/
*So that I can apply it to the website I am developing

First thing: Cascading Select/Options lists like this jsFiddle ( http://jsfiddle.net/annavester/Zd6uX/ )
Second thing: Printing value when an option is selected ( http://jsfiddle.net/laguiz/MDeme/1/ )

With my Fiddle, only the 'second thing' works -- because that is all the code there is. But it is odd because the printed value seems to be scrambled. I don't even know where to begin for unscrambling. ://>/>

Is This A Good Question/Topic? 0
  • +

Replies To: Learning AngularJS

#2 ThrowsException  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 83
  • Joined: 21-February 12

Re: Learning AngularJS

Posted 03 July 2013 - 09:23 AM

I'm an angular novice as well so forgive me if my explanations aren't entirely accurate or good for that matter but I think I can help you on your first issue. Your span tag is giving you some very strange and unwanted side effects and I don't think your getting what the ng-model on your select is doing for you.

First I'll start with this. the ng-model for your select is going to be bound the the selected value in the option list.

So when you do this
<option value="{{product.name}}" ng-repeat="product in category.products">{{product.name}}</option>



When an option is selected now the ng-model="selectedValues" is going to be the name of whatever product you picked as set by value="{{product.name}}.

essentailly at this point your selectedValues model is a string. So when this line happens
<span ng-repeat="price in selectedValues">{{price}}</span>


What you actually are thinking is price is the name of the product. I have no Idea what ng-repeat is doing to that string but that is what is getting jumbled up and then outputting to {{price}}. If what you are looking to do is output the price when a product is selected you need to change up your options tag a little to this.

<option value="{{product.price}}" ng-repeat="product in category.products">{{product.name}}</option>



Now what will happen is the selectedValues model will be set to the price when A product is selected and now your span just becomes.
<span>{{selectedValues}}</span>



Hopefully I've at least cleared up a couple things for you. Good luck on the second part of your project.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1