2016-07-12 34 views
0

我正在嘗試做多行選擇並拖入另一個容器。 我可以做多次拖放,而不使用ng-repeat值。如果我使用ng-repeat $(「。draggable_tr」)。click(function()函數沒有被調用,我不知道爲什麼ng-repeat值不被支持,我使用下面的鏈接作爲參考http://jsfiddle.net/83k9k/5/在jQuery中的多個拖放問題

HTML代碼:

<div class="new-drag">      
    <div class="myHeight" style="width: auto;" ng-scrollbars> 
    <div id="table1" class="bitacoratable"> 
     <table id="table1" class="table table-hover table-striped childgrid border-zero"> 
      <tr class="draggable_tr " ng-repeat="t in tabledata"> 
       <td width="30" class="table-hover-dots"> 
        <i class="table-dots dots"></i> 
        <div class="w-15 custom-inputs checkbox"> 
         <input type="checkbox" name="check" id="check-1"> 
         <label for="check-1"></label> 
        </div> 
       </td> 
       <td width="60" >{{t.id}}</td> 
       <td width="200"> 

       {{t.name}} 
        </a> 
       </td> 
       <td width="60">{{t.dep_no}}</td> 
       <td width="80">{{t.status}}</td> 
       <td width="80">{{t.city}}</td>          
      </tr>  
      </table> 
     </div> 
    </div> 
</div> 

JS代碼:

*$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({ 
helper: function(){ 
    var selected = $('.childgrid tr.selectedRow'); 
     if (selected.length === 0) { 
      selected = $(this).addClass('selectedRow'); 
} 
    var container = $('<div/>').attr('id', 'draggingContainer');    
    container.append(selected.clone().removeClass("selectedRow")); 
    return container; 
} 
}); 

$("#table2 .childgrid").droppable({ 
drop: function (event, ui) { 
console.log(angular.toJson(event)); 
$(this).append(ui.helper.children()); 
//$('.selectedRow').remove(); 
} 
}); 
$scope.tabledata=[{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"}] 

$(".draggable_tr").click(function(){      
$(this).toggleClass("selectedRow"); 
}); 

回答

0

你需要一個directive

HTML

<table> 
    <tr class="draggable_tr" my-tr-directive> 
</table> 

JS

.directive("my-tr-directive", function() { 
    return { 
     link: function(scope, elem, attrs) { 
      $(elem).click(function() { 
       console.log('Here I am!'); 
      }); 
     } 
    } 
}); 

欲瞭解更多信息,看看here