Copy HTML and change ng-model

Asked

Viewed 1,115 times

0

I have a piece of HTML that I am duplicating via HTML. Within the scope, however, ng-model is not working. HTML:

<html ng-app="App"  ng-controller="Theme" >
     <head>
     </head>
     <body>
         <div id="parte1">
              <input type"text" ng-model="teste" value="{{ value }}" />
         </div>
         <div id="modal"><div id="modal_content"></div></div>
     </body>
</html>

And in my JS I’m doing the following:

 $('modal').html($('parte1').html());

The value goes to the input. The input appears right, but what I change in modal, does not change my model.

javascript jquery html angularjs
  • 1

    I’m sorry to comment this but, 10 issues already '---' for what so?? I was a little sick yesterday, tired and may not have written very fluid but, 10 issues? sahushausshuasa

1 answer

1

Angularjs works differently than jquery so you have to let go of jquery-like thinking and go on to do the "the angular way thing".

In your case, I think you want to "duplicate" the first input within the modal. However, you are thinking in terms of DOM not MVC (model, view, controller). When you create a model, this model is available within "Scope". Each template can be connected to multiple "views".

So the only thing you have to do is create a new input and Binding that input to the same model. That is:

<div ng-controller="theme">
  <div id="parte1">
    Parte1: <input type="text" ng-model="teste"/>
  </div>
  <div id="modal">
    <div id="modal_content">
      Dentro do modal: <input type="text" ng-model="teste"/>
    </div>
  </div>
</div>

If you change the second input, the first also changes and vice versa.

PLUNKR

note

As a note, as you are starting at the angle, I advise you not to use jquery at the same time, to lose the "vices" of jquery. It helped me to do things "the angular way" =P

I also advise to read this Article (in English)

  • right but, I’m replicating the input that will be opened in modal and the user will type the value in modal... so the problem

  • and jquery is not changing the variable, it is only replicating the input that the guy will inform the value

  • Because jquery does not change the variable, it changes the value of the DOM Object.

  • @What exactly do you want to do? I don’t understand! Explain what you want to do

  • i create several fields dynamically at the time of assembling the screen that go to a modal, only that this modal receives several things, since alerts to content, when I play the content that has the inputs pro user change in modal, when the user type in input, the values do not change in the model, therefore, the edition made in the modal, is lost, and I need the ng-model capture the edition made in the modal, being that, the contents of the modal, is played via html() by jQuery...

  • @Caiogomes Got it, check out my new answer.

  • right but, I need the modal value to be dynamic, I can not start my html with it, so it would work, but, the content of the modal will change, so.... i need a solution that I change via jQuery for example, and bind is done

  • But this modal... is using the bootstrap? Is that what you want to do can not do. Jquery moves the DOM, can not touch the angular models.

  • yes, I’m using bootstrap

  • Use bootstrap.ui http://angular-ui.github.io/bootstrapinstead/

Show 5 more comments

Browser other questions tagged javascript jquery html angularjs

You are not signed in. Login or sign up in order to post.