使用angularjs单击时将div移动到另一个div答案

【问题标题】：Move div into another div when clicked using angularjs使用angularjs单击时将div移动到另一个div
【发布时间】：2016-10-04 00:00:09
【问题描述】：

我在使用 ng-repeat 的列表中有一个输入。输入的 id 列为“newLicName”。问题是，由于它是 ng-repeat，这意味着它创建了多个输入（列表中的每个项目一个），所有输入都具有相同的 ID（“newLicName”），所以当我尝试在 javascript 中检索该值时（通过 document.getElementById('newLicName'))，它只检索具有该 ID 的第一个输入的值。我对该问题的解决方案是删除输入并将其放置在 li 标记之外的 div 中，然后在单击时将其移动到特定列表项旁边，但我似乎无法找到使用 angularJS 的方法

例如：

<li ng-repeat="item in items">
  {{item.name}}
  <a href="#" ng-click="doThis(item)">Click</a>
  <div id="placeWithin"></div>
</li>

<div id="content">
  <input id="newLicName" value="Content in here" />
</div>

$scope.doThis = function (item){
    //code here  
}

在此示例中，当我单击超链接时，我希望将位于 li 标记之外的 div 放置在 li 标记内。我将如何通过 angularJS 实现这一目标？

【问题讨论】：

尝试<input id="placeWithin_{{$index}}"></div> 分配不同的ID。然后你可以拨打doThis(item, $index)访问它。
@HanletEscaño 成功了，谢谢！

标签： javascript html angularjs

【解决方案1】：

正如 cmets 中有人解释的那样，您可以简单地执行此操作以进行唯一输入：

<input id="placeWithin_{{$index}}"></div>

但是，如果您尝试从输入中检索值，则不必求助于这个 javascript hack。您可以将您的输入与 ng-model 绑定，并按照这篇文章了解如何在 ng-repet 中处理 ng-model：

Binding ng-model inside ng-repeat loop in AngularJS

【讨论】：