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 <input id="placeWithin_{{$index}}"></div> to assign different ids. Then you can call doThis(item, $index) to access it. — Hanlet Escaño
– Hanlet Escaño, Commented Jun 3, 2016 at 20:07

Community · Accepted Answer · 2017-05-23 12:31:35Z

1

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 3, 2016 at 20:10

Wagner Danda da Silva Filho

5,5179 gold badges43 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Move div into another div when clicked using angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related