Move div into another div when clicked using angularjs

Question

I have an input within a list that utilizes ng-repeat. The input's id is listed as "newLicName". Problem is, that since it's ng-repeat, that means that it creates multiple inputs (one for each item in the list), all with the same ID ("newLicName"), so when I try to retrieve that value in the javascript (through document.getElementById('newLicName')), it only retrieves the value of the first input with that ID. My solution to that issue was to remove the input and place it within a div outside of the li tag and then move it next to the specific list item when it is clicked, but I can't seem to find how to do it using angularJS

For example:

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

In this example, when I click the hyperlink, I want the div located outside of the li tag to be placed within the li tag. How would I achieve this through angularJS?

Try `` to assign different ids. Then you can call `doThis(item, $index)` to access it. — Hanlet Escaño, Jun 03 '16 at 20:07

score 1 · Accepted Answer · edited May 23 '17 at 12:31

As someone explained in the comments, you could simply do this to make unique inputs:

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

However, if what you are trying to do is retrieve the values from the inputs, you don't have to resort to this javascript hack. You can bind your input with ng-model and follow this post to learn how to deal with ng-model inside an ng-repet:

Binding ng-model inside ng-repeat loop in AngularJS

Move div into another div when clicked using angularjs

1 Answers1