Как скопировать полный Div в другой DIV с jquery в angular2

-2

Я пытаюсь скопировать весь DIV в другой div.Как скопировать полный Div в другой DIV с jquery в angular2

<div id="rightcolumn"> 

    some content 

    </div> 


    <div id="test"> 

    <div> 

    <div (click)="addMatter()"> Add Matter </div> 

On Component Side. 

    $("#test").append($("#rightcolumn"));

Но это не работает.

Есть ли другой способ выполнить эту задачу в Angular2?

Спасибо заранее.

Здравствуйте,

Теперь Copy работает, но проблема Dropdown не имеют каких-либо значений. Выпадающее событие изменения, созданное на главном div, также не работает в этом новом скопированном div.

Есть ли какие-либо настройки для этого?

<div id="parentdiv" class="wrapper"> 
      <div id="leftcolumn"> 
       Filters: 
      </div> 
      <div id="rightcolumn" class="rightcolumn"> 

       <div style="border:1px solid black;width:90%;"> 
       <div class="mainContainer"> 
        <div class="rightSideContainer"> 
        <select class="moduledropdownlistOption"> 
         <option value="And"> And </option> 
         <option value="Or"> Or </option> 
        </select> 
        </div> 
       </div> 

       <div class="mainContainer"> 
       <div class="rightSideContainer"> 
        <span class="headerContainerForrightSide"> Group By: </span> 
        <select id="moduledropdownlist" class="moduledropdownlist test" (change)="OnSelectGroupBy($event.target.value)"> 
         <option *ngFor="let field of fieldList" (click)="SelectedItem(field.ColumnName)" value= {{field.ColumnName}}> 
          {{field.DisplayColumnName}} 
         </option> 
        </select> 
        </div> 
       </div> 

       <div class="mainContainer"> 
        <div class="rightSideContainer"> 
        <span class="headerContainerForrightSide"> Filter By: </span> 
         <select class="moduledropdownlist" style="margin-left:7px;"> 
         <option value= "0"> -------- Select -------- </option> 
         <option *ngFor="let filtervalue of filterList" value= {{filtervalue.ColumnValue}}>{{filtervalue.ColumnValue}} 
         </option> 
         </select> 
       </div> 
       </div> 
       </div> 
       </div> 
       </div> 

       <div id="childdiv" class="wrapper" style="margin-top:10px;"> 

       </div> 
<div (click)="addMatter()"></div>

в компоненте: - экспорта класс SchedulerSearchComponent реализует OnInit {

addMatter() {

$("#childdiv").append($("#parentdiv").html());

}

В Выше падении коды вниз не имеет значения, так же как и на новом div, никакое событие не является огнем.

источник

2016-09-27 ketan patel

Используйте метод клонирования:

$("#test").append($("#rightcolumn").clone());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rightcolumn"> 
 

 
some content 
 
</div> 
 

 
<div id="test"> 
 

 
</div> 
 

 
<div (click)="addMatter()"> Add Matter </div>

источник

2016-09-27 14:26:22

Здравствуйте, Спасибо за ваш ответ. Ниже код работает для меня. $ ("# Childdiv") добавить ($ ("# parentdiv") HTML().). Проблема состоит в том, что DIV имеет два раскрывающихся списка. Значение Drop Down List пусто. Это два раскрывающегося списка, как страна штата. При выборе списка состояний страны. Но после копирования нет привязки события/значения к новому созданному выпадающему списку. Есть ли у вас какие-либо идеи ? –

Это значение не копируется в новом созданном выпадающем списке. - Выберите --- Работает после копирования, но не работает. Есть идеи ? –

Дайте мне полный код. –

Что вам нужно? Что-то вроде этого?

function CountryCntrl($scope) { 
 
    $scope.countries = { 
 
    'India': { 
 
     'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 
 
     'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 
 
     'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] 
 
    }, 
 
    'USA': { 
 
     'Alabama': ['Montgomery', 'Birmingham'], 
 
     'California': ['Sacramento', 'Fremont'], 
 
     'Illinois': ['Springfield', 'Chicago'] 
 
    }, 
 
    'Australia': { 
 
     'New South Wales': ['Sydney'], 
 
     'Victoria': ['Melbourne'] 
 
    } 
 
    }; 
 
}

<html ng-app> 
 
    <head> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <div ng-controller="CountryCntrl"> 
 
     <div> 
 
     Country: 
 
     <select id="country" ng-model="states" ng-options="country for (country, states) in countries"> 
 
        <option value=''>Select</option> 
 
       </select> 
 
      </div> 
 
      <div> 
 
       States: <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"><option value=''>Select</option></select> 
 
      </div> 
 
      <div> 
 
       City: <select id="city" ng-disabled="!cities || !states" ng-model="city"><option value=''>Select</option> <option ng-repeat="city in cities" value='{{city}}'>{{city}}</option></select>   
 
      </div> 
 
     </div> 
 
    
 
    </body> 
 
</html>

источник

2016-09-28 16:43:14

Как скопировать полный Div в другой DIV с jquery в angular2

ответ

Смежные вопросы