I have this code
<script>
var demo =angular.module('ExampleApp', ['ngDraggable']);
demo.controller('MainCtrl', function ($scope) {
$scope.centerAnchor = true;
$scope.toggleCenterAnchor = function () {$scope.centerAnchor = !$scope.centerAnchor}
$scope.draggableObjects = [{name:'subject1'}, {name:'subject2'}, {name:'subject3'}];
$scope.droppedObjects1 = [];
$scope.droppedObjects2 = [];
$scope.onDropComplete1=function(data,evt,i){
console.log(data);
var index = $scope["droppedObjects"+i].indexOf(data);
if (index == -1)
$scope["droppedObjects"+i].push(data);
}
$scope.onDragSuccess1=function(data,evt,i){
console.log("133","$scope","onDragSuccess1", "", evt);
var index = $scope["droppedObjects"+i].indexOf(data);
if (index > -1) {
$scope["droppedObjects"+i].splice(index, 1);
}
}
var inArray = function(array, obj) {
var index = array.indexOf(obj);
}
});
var x = 1;
demo.$inject = ['$scope'];
demo.directive("boxCreator", function($compile){
return{
restrict: 'A',
link: function(scope , element){
element.bind("click", function(e) {
var childNode = $compile('<div ng-drop="true" ng-drop-success="onDropComplete1($data,$event,'+x+')"><span class="title">Drop area #'+x+'</span><div ng-repeat="obj in droppedObjects'+x+'" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event,x)" ng-center-anchor="{{centerAnchor}}">{{obj.name}}</div></div>')(scope)
element.parent().prepend(childNode);
x++;
// console.log(angular.element('ng-drop'));
});
}
}
});
</script>
What I'm trying to do is to create dynamically objects on click of button instead of this $scope.droppedObjects1 = []; and $scope.droppedObjects2 = []; kindly help me with this and what are the further changes required in code. I'm new to AngularJS.
