Copy HTML and change ng-model

Question

Copy HTML and change ng-model

Navigation

#1 by (1 votes)

0

I have a piece of HTML that I'm duplicating via HTML. Within scope, however, the 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 correct, but what I change in modal does not change my model.

javascript html jquery angularjs

asked by anonymous 02.05.2014 / 03:57

1 answer

Objectify does not return query with a simple filter How to do authentication with Devise via AJAX?

score 1 · Answer 1

Angularjs works differently than jquery so you have to drop jquery-like thinking and move on to doing things "the angular way".

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

So the only thing you have to do is create a new input and bind 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 one also changes and vice versa.

PLUNKR

note

As a note, as if you are starting in 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 you to read this article English)