我有以下jquery方法:
$('.niGridTable table tr').addClass('selected').end().click(function (event) {
event = event || window.event;
var isClassExist = false;
var closesedTable = $(event.target).closest('tr').find('.selected_row');
if (closesedTable.length > 0) {
isClassExist = true;
if (event.ctrlKey) {
for (var i = 0; i < closesedTable.length; i++) {
if ($(closesedTable[i]).hasClass('selected_row')) {
$(closesedTable[i]).removeClass('selected_row');
}
}
}
}
if (!event.ctrlKey) {
if ($('td').hasClass('selected_row')) {
$('td').removeClass('selected_row');
}
}
if (!isClassExist) {
$('.table-striped > tbody > tr:hover > td').addClass('selected_row');
}
});
我想把这样的代码写成angular way.like ...
element.on(&#39;点击&#39;,功能(事件){ }
答案 0 :(得分:0)
In my directive I have changed my question said jquery to Angularjs. In this case I have use angular.element.
$timeout(function () {
//get all row for set selected row class
var trs = iElement.find('tr');
for (var index = 0; index < trs.length; index++) {
var tableTr = angular.element(trs[index]);
//remove prvious click event
tableTr.unbind('click');
tableTr.bind('click', function (event) {
event = event || window.event;
event.stopPropagation();
event.preventDefault();
//if target row contain previos selection then remove such selection
var isClassExist = false;
var targetTd = angular.element(event.target);
var targetTr = targetTd.parent();
if (targetTr.hasClass('selected_row')) {
targetTr.removeClass('selected_row');
isClassExist = true;
}
//if another row contain selection then remove their selection but if control button pressed then it will not work
var closesedTable = iElement.find('tr');
if (closesedTable.length > 0) {
if (!event.ctrlKey) {
for (var i = 0; i < closesedTable.length; i++) {
var eachRow = angular.element(closesedTable[i]);
if (eachRow.hasClass('selected_row')) {
eachRow.removeClass('selected_row');
}
}
}
}
//set selection
if (!isClassExist) {
targetTr.addClass('selected_row');
}
////get selected rows
//for (var j = 0; j < trs.length; j++) {
// gridOption['selectedRow'].push();
//}
});
}
}, 0);