Duplicate HTML div on ng-click without using directive

Question

Is there any way to duplicate code in Angujar JS ng-click without using a directive? This is my code I want to clone:

<div class="panel">
        <div class="row">
            <div class="small-5 columns">
                <select ng-model="vm.playlist" ng-options="lang.name for lang in vm.playlist"></select>
            </div>
            <div class="small-5 columns">
                <input type="text" placeholder="playlist" ng-model="vm.target"/>
            </div>
            <div class="small-2 columns" ng-click="rootVm.openModal()">
                <img src="assets/img/mission/browse.png" ng-model="vm.icon" />
            </div>
        </div>
</div>

On ng-click, I suppuse that I have to call a function in my controller. So, how the code is duplicated?

If finally had to do it with a directive, how it would be?

Cheers!

This is like asking how to code in Java without using methods ...why do you not want to use a directive? Are you aware that you are using about half a dozen directives in the code you posted? — meriton
– meriton, Commented Jun 15, 2016 at 12:25

Shashank · Accepted Answer · 2016-06-15 12:52:51Z

1

You can clone using the button click on ng-click by specifying the sourceId (mainDiv) and targetId (cloneDiv):

HTML:

<button ng-click="clickToClone('mainDiv', 'cloneDiv')">
    Click to Clone
</button>

JS:

$scope.clickToClone = function(sourceId, cloneId) {
    var sourceHtml = angular.element(document.getElementById(sourceId)).html();
    angular.element(document.getElementById(cloneId)).append(sourceHtml);
}

Watch the demo here.

answered Jun 15, 2016 at 12:52

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deep · Accepted Answer · 2016-06-15 12:43:36Z

0

Although you should go for ng-repeat and increment the the model of the ng-repeat on ng-click but if still you want to do on click wihtout changing the model then you can call a function like clonerow in controller

 $scope.clonerow = function()
 {
    var parentElement = angular.element( document.querySelector( '.panel' ) );
    var tobeClonedElement = angular.element( document.querySelector( '.row'   ) );
    parentElement.append(tobeClonedElement.clone());
 }

Check the plunker

https://plnkr.co/edit/gHIwJ0llklD8BgEsM6Gs?p=preview

edited Jun 15, 2016 at 12:43

answered Jun 15, 2016 at 12:28

Deep

9,7962 gold badges24 silver badges34 bronze badges

3 Comments

meriton Over a year ago

You might want to save your plunkr before posting the link - if I click on the link, I just see the angular "hello {{name}}" template ...

meriton Over a year ago

Are you sure this sets up proper scopes for the nested directives?

Deep Over a year ago

not sure where with plunker is gone since i took my code from there only to mention here as well. will be updating it again. and regarding scope , i have already told the OP the right way is to go by data driven method (ng-model) , the code was just for his knowledge and nothing else

Collectives™ on Stack Overflow

Duplicate HTML div on ng-click without using directive

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related