Как сделать ng-click работает только при событии click

Question

Я новичок в угловом и пытаюсь переключить класс по щелчку только по текущей ссылке. Но при нажатии он работает со всеми ссылками. Я хочу, чтобы он работал только с текущим элементом. Для этого мы используем (это) в jquery.

сценарий:

var data = '<td id="'+index+'" class="drag drop"><div class="ui-resizable tac"><div class="ui-resizable">' + header[index].description + '<br>' + header[index].name +'</div></div><div id="div'+index+'" class="report-container" style="display:inline-block;float:left;"><ul class="report-list">'; 
      for(var key = 0; key < listTemp.length; key ++){ 
       data+= "<li class='bg-l-grey' ng-class='{ opened: selectedIndex == 0}' style='background:" + listTemp[key].color +"'><span><em class='left'>" + listTemp[key].mpValue + "</em><em class='right'>" + parseInt(listTemp[key].yield) + "</em></span>"+ 
         '<div class="list-swiper bg-black" ng-click="selectedIndex = 0"><span class="swipe-left"></span><span class="swipe-right"></span></div><div class="report-icon-list bg-l-green"><a href="#" class="cht-doc"><span><i class="cht-sprite"></i></span></a><a href="#" class="cht-cam"><span><i class="cht-sprite"></i></span></a><a href="#" class="cht-add"><span><i class="cht-sprite"></i></span></a></div></li>'; 
      } 
      data+= '</ul></div></td>'; 

$scope.openSwap = function($event) { 
     // body... 
     var elementParent = $event.currentTarget.parentElement.offsetParent; 
     angular.element(elementParent).toggleClass("opened"); 
     if ($(elementParent).hasClass("opened")) { 

     }else { 
      console.log(false); 
     } 
     $event.stopPropagation(); 
    } 

Я хочу нажать на событие ".list-Swiper" класса и класса тумблер на родительском ли.

Answer 1

Используйте ng-class, чтобы изменить класс по данной ссылке.

<ANY class="ng-class: expression;"> ... </ANY> 

Answer 2

Вы можете переключать класс и использовать ng-class с этим:

<div class="list-swiper bg-black" 
    ng-class="{ opened: thisElementClicked }" 
    ng-click="thisElementClicked = true">..</div> 

Это добавит класс «открытый» к div элементу при клике.

Конечно, Вы можете также добавить ng-class к родителю, который добавит класс на родителя:

<li ng-class="{ opened: thisElementClicked }"> 
    <div class="list-swiper bg-black" 
     ng-click="thisElementClicked = true">..</div> 
</li> 

Вы, вероятно, есть несколько li элементов, где вы можете захотеть сделать это более динамично:

<ul> 
    <li ng-class="{ opened: selectedIndex == 0 }"> 
     <div class="list-swiper bg-black" 
      ng-click="openSwap(0)">..</div> 
    </li> 
    <li ng-class="{ opened: selectedIndex == 1 }"> 
     <div class="list-swiper bg-black" 
      ng-click="openSwap(1)">..</div> 
    </li> 
</ul> 

контроллер:

$scope.openSwap = function (index) { 
    $scope.selectedIndex = index; 
    // .. more 
} 

---

Даже проще, если вы можете построить li «S динамически:

$scope.swipers = [ 
    { title: "first swiper"}, 
    { title: "second swiper"}, 
    // .. 
} 

$scope.openSwap = function (index) { 
    $scope.selectedIndex = index; 
    // or toggle, depends what you want: 
    // if ($scope.selectedIndex == index) { 
    //  $scope.selectedIndex = -1; 
    // } else { 
    //  $scope.selectedIndex = index; 
    // } 
} 

вид:

<ul> 
    <li ng-repeat="swiper in swipers" 
     ng-class="{ opened: selectedIndex == $index }"> 
     <div class="list-swiper bg-black" 
      ng-click="openSwap($index)">{{ swiper.title }}</div> 
    </li> 
</ul> 

Answer 3

"jqLite"(определено на странице angular.element) предоставляет DOM методы обхода, как children(), parent(), contents(), find(), next()(но не предыдущий()). Не существует селекторного метода.

Вы можете попробовать ядро ​​querySelector в JavaScript, перейдите по ссылке:

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector.

Существует не какая-либо концепция $ (this) в угловом, что вы делаете в jquery, вместо этого вы должны проходить до элемента через javascripts querySelector или angular.element (document) .find (...) или $ document. найти()

документации найти проверку ниже ссылке:

https://docs.angularjs.org/api/ng/function/angular.element