CODEWITHSUNDEEP
angularjs
eatshootrock
eatshootrock

Reputation: 1

Bind ng-click select to input

I have successfully binded a div ng-click value to display on an input box. I would also like to do that via a value of the chosen select option.

<div>
<input name="amountSelector.amountValue" ng-model="amountSelector.amountValue" >
<h3>Amount Chosen : {{amountSelector.amountValue}}</h3>
<hr>
<!-- When a DIV is clicked, it will send a value to the input box above -->
<div>
  <h1> Div value to Input above</h1>
  <div ng-click="setAmount('1000')">
    <h3>1000 - Monthly</h3>
    <p>description</p>
  </div>
  <div ng-click="setAmount('2000')">
    <h3>2000 - Monthly</h3>
    <p>description</p>
  </div>
  <div ng-click="setAmount('3000')">
    <h3>3000 - Monthly</h3>
    <p>description</p>
  </div>
</div>
<hr>
<!-- When an option is selected, it should send a value to the input box above but is not working -->
<div>
  <h1> select value to Input</h1>
  <select class="" name="">
    <option ng-click="setAmount('1000')">1000 - Monthly</option>
    <option ng-click="setAmount('2000')">2000 - Monthly</option>
    <option ng-click="setAmount('3000')">3000 - Monthly</option>
  </select>
</div>
</div>

Below is a sample of this code https://plnkr.co/edit/8FArFqkzp1YentbpWy5F?p=preview

Upvotes: 0

Views: 236

Answers (2)

David Coxon
David Coxon

Reputation: 45

As your SetAmount function appears to simply be assigning to a scope value, i'd recommend actually binding the select to that value, and adding value attributes to each option. 

<select class="" name="" ng-model="amountSelector.amountValue">
                  <option value="1000">1000 - Monthly</option>
                  <option value="2000">2000 - Monthly</option>
                  <option value="3000">3000 - Monthly</option>
</select>

Updated plunkr here :

https://plnkr.co/edit/onfYMUp2pz9Pw5KaBI82?p=preview

Upvotes: 0

martin
martin

Reputation: 96891

Don't use ng-click on <option> elements. Use ng-change and ng-model on the <select> element instead.

<select class="" name="" ng-change="setAmount(itemValue)" ng-model="itemValue">
    <option value="1000">1000 - Monthly</option>
    <option value="2000">2000 - Monthly</option>
    <option value="3000">3000 - Monthly</option>
</select>

See updated plnkr: https://plnkr.co/edit/Hy8om1Fkf71cSXY6UqbU?p=preview

Upvotes: 1

Related Questions