javascript - 下拉菜单和文本区域与 AngularJS 绑定(bind)

Question

我有一个非常简单的场景，我想使用 AngularJS 来实现。我无法把这件事做好。

我正在从数据库中检索数据并将其直接写入下拉列表中的 View 中。根据他们选择的项目，我想将值填充到教科书中。

所以我的代码如下:

<select>
  <option selected="selected" disabled="disabled">dropdown</option>
  @foreach (System.Data.DataRow row in ViewBag.Template.Rows)
  {
    <option value="@row[1].ToString()">@row[0].ToString()</option>
  }
</select>
<textarea></textarea>

我正在努力实现以下目标:

无论用户选择什么选项，该项目的相应值都会填充到文本区域中。

请建议我如何使用 AngularJS 实现。

Answer 1

您应该使用ngModel指令，对于 select 和 textarea 都是相同的:

<select ng-model="selectModel">
  <option selected="selected" disabled="disabled">dropdown</option>
  @foreach (System.Data.DataRow row in ViewBag.Template.Rows)
  {
    <option value="@row[1].ToString()">@row[0].ToString()</option>
  }
</select>
<textarea ng-model="selectModel"></textarea>

演示: http://plnkr.co/edit/XOs6wUyqdr3ZlFtBq3RB?p=preview