2016-09-27 60 views
-2

我想將整個DIV複製到另一個div。如何將完整的Div複製到另一個DIV與角2中的jquery

<div id="rightcolumn"> 

    some content 

    </div> 


    <div id="test"> 

    <div> 

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

On Component Side. 

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

但它不工作。

在Angular2中有任何其他方式來完成這項任務嗎?

在此先感謝。


你好,

現在複製工作,但問題是下拉沒有任何價值。在主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沒有事件是火。

回答

0

使用克隆方法:

$("#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>

+0

您好,感謝您的答覆。以下代碼適用於我。 $( 「#childdiv」)追加($( 「#parentdiv」)HTML()。)。問題是DIV有兩個下拉列表。下拉列表值爲空。這兩個下拉菜單就像州立國家一樣。在選擇國家列表來。但複製後沒有事件/值綁定在新建立的下拉菜單上。你有什麼主意嗎 ? –

+0

該值不會複製到新創建的下拉列表中。 - 選擇---複製後工作但不工作。任何想法 ? –

+0

給我一個完整的代碼。 –

0

你需要什麼?像這樣?

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>

相關問題