将jquery转换为Angularjs

时间:2014-10-30 05:53:53

标签: javascript jquery angularjs

我有以下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;,功能(事件){ }

1 个答案:

答案 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);