Question

我已成功绑定了一个div-click值以显示在输入框中。我还想通过所选择的选项的值来做到这一点。

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

以下是此代码的示例 https://plnkr.co/edit/8FArFqkzp1YentbpWy5F?p=preview

Answer 1

不要在ng-click元素上使用<option>。请改用ng-change元素上的ng-model和<select>。

<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

Answer 2

由于您的SetAmount函数似乎只是分配给作用域值，我建议将select实际绑定到该值，并为每个选项添加值属性。

<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

绑定ng-单击选择以输入

2 个答案: