如何使用角度2中的jquery将Full Div复制到另一个DIV

时间:2016-09-27 13:57:51

标签: jquery angular

我正在尝试将整个DIV复制到另一个div中。

   <div id="rightcolumn">

    some content

  </div>


  <div id="test">

  <div>

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

On Component Side.

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

但它不起作用。

在Angular2中还有其他方法可以执行此任务吗?

先谢谢。

您好,

现在复制正在运行,但问题是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没有事件是火。

2 个答案:

答案 0 :(得分:0)

使用克隆方法:

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

答案 1 :(得分:0)

你需要什么?像这样的东西?

&#13;
&#13;
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']
    }
  };
}
&#13;
<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>
&#13;
&#13;
&#13;