2016-09-09 6 views
0

入力ボックスに表示するdiv ng-click値をバインドしました。私はまた、選択された選択肢の値を使ってそれをしたいと思います。以下はBind ng-click select to input

<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> 

<option>要素にng-clickを使用しないでください。このコード https://plnkr.co/edit/8FArFqkzp1YentbpWy5F?p=preview

答えて

1

のサンプルです。代わりに<select>要素にng-changeng-modelを使用してください。

<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> 

更新plnkr参照してください:https://plnkr.co/edit/Hy8om1Fkf71cSXY6UqbU?p=preview

+0

WOW!それは速かった。それは今一日私を悩ませている。ちょうどAngularJS最後の金曜日を学び始めました。 =)もう一度ありがとう! – eatshootrock

0

をごSetAmount機能は、単にスコープ値に割り当てるように見えるように、私はその値に選択を結合し、各オプションにvalue属性を追加し、実際にお勧めします。

<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> 
ここ

更新plunkr:

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

関連する問題