CODEWITHSUNDEEP
angularjs
soum
soum

Reputation: 1159

how to read a property of an object in change event

This is my first angular app...and I must say I am amazed how awesome the framework is. The task is to build a price calculator which will apply a state tax after selecting a state. This is what I have some far in my JS

function testApp($scope){
    $scope.quantity = 1;
    $scope.price = 10.99;

    $scope.states = [
        {stateName:'--'},
        {stateName:'New York',stateId: 'NY', tax: 0.5},
        {stateName:'Pennsylvania', stateId: 'PA', tax: 0.3},
        {stateName:'California', stateId: 'CA', tax: 0.6}
    ];
}

My markup looks like this

<div ng-app="" ng-controller="testApp">
Quantity: <input type="number" max="5" ng-model="quantity"/>
Price: <span class="price">{{price|currency}}</span>

State: 
<select>
  <option ng-repeat="x in states" id="{{x.stateId}}">
    {{x.stateName}}
  </option>
</select>

    <h2 id="greeting">Total: {{quantity*price|currency}}</h2>
</div>

I am not able to wrap my head around the how will I read the tax property for the states object and on change and pass it to the total. Maybe very simple which I am not able to understand conceptually

Here is my fiddle

http://jsfiddle.net/sghoush1/ssuybyzc/2/

Upvotes: 0

Views: 31

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

Look into data-ng-options. You shouldn't be building a select like that. Here is the updated html:

<select data-ng-model="selectedState" data-ng-options="state as state.stateName for state in states">

Along with your updated fiddle: http://jsfiddle.net/dLb9kx6q/

Upvotes: 2

Related Questions