在 Angular 中的 ng-model 之间切换答案

【问题标题】：Switching between ng-model in Angular在 Angular 中的 ng-model 之间切换
【发布时间】：2014-12-18 20:55:01
【问题描述】：

我有一个 Angular JS 代码，它在从数据库请求信息后生成一个导航列表。我希望能够在单击特定的 li 元素后显示与导航关联的文本字段的 ng-model。例如，如果我单击列表的第二个元素，我希望文本的 ng-model 绑定到“data.alt2”。如果我单击第一个元素，我希望 ng-model 绑定到“data.alt1”。我曾尝试使用 JQuery ID 来解决这个问题，但我听说使用 Angular 有更优雅的解决方案。

<ul class="nav nav-pills">
   <li role="presentation" class="active" ng-repeat="alts in alternatives" >
          <a > {{alts}}</a>
   </li>
</ul>

<div class="panel-body" >
     <textarea placeholder="Enter name of alternative"  ng-model="data.alt1">  </textarea>
</div>

谢谢。

【问题讨论】：

标签： jquery angularjs data-binding angularjs-ng-repeat ng-repeat

【解决方案1】：

<li role="presentation" class="active" ng-repeat="alts in alternatives" >
<a ng-click="selected($index)"> {{alts}}</a>
</li>
<div class="panel-body" >
     <textarea placeholder="Enter name of alternative"  ng-model="data.alt{{clicked}}">  </textarea>
</div>

控制器：

 $scope.selected = function(index) {
     $scope.clicked = (index);
     }

应该可以。 ng-click 会将单击的项目的索引传递给控制器中的选定函数。索引号应该存储在 $scope.clicked 变量中，该变量会反映在 ng-model 中。

【讨论】：

【解决方案2】：

您可以将 textarea 绑定到数组，或者将数据对象用作数组：

<textarea placeholder="Enter name of alternative"  ng-model="data[indexClicked]">
</textarea>

如果您的数据与您的 alts (alts[i] -> data[i]) 排序相同，它应该可以完美运行。

【讨论】：