如何向 Angular JS 中单击的父链接添加/删除类？

debugcn 发表于 Dev

帕万

我有三个链接，点击链接后，如何向点击的链接添加一个类？

该类必须添加到单击的父级导航项开始

这是我的代码

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope)
{

// The class must be added to clicked one's parent that is  nav-item start

        $scope.callOne = function()
        {
                alert('one');
        }
        $scope.callTwo = function()
        {
                alert('two');
        }
        $scope.callThree = function()
        {
                alert('three');
        }
});

我的小提琴

http://jsfiddle.net/9fR23/448/

你能告诉我怎么做吗

伊尚克

我们可以$event通过ng-click方法传递，然后解析到所需的父级。

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope)
{
        $scope.callOne = function(evt)
        {      
        parentElement(evt);
        }
        $scope.callTwo = function(evt)
        {
                parentElement(evt);
        }
        $scope.callThree = function(evt)
        {
                parentElement(evt);
        }
        
        var element;
        function parentElement(evt){
       
        if(element!=undefined && element.classList.contains('red')){
          element.classList.remove('red');
        }
        
        if(evt.target.classList.contains('nav-item')){
         element = evt.target;
        }else if(evt.target.parentNode.classList.contains('nav-item')){
        element = evt.target.parentNode;
        }else if(evt.target.parentNode.parentNode.classList.contains('nav-item')){
        element = evt.target.parentNode.parentNode;
        }
        
        element.classList.add('red')
      
        return element;
        }
});

.red
{
      background-color: #03A9F4;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
   <div ng-app="myapp" ng-controller="FirstCtrl">
      <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
         <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
         
         <!-- END SIDEBAR TOGGLER BUTTON -->
         <li class="nav-item start ">
            <a  ng-click="callOne($event)" class="nav-link nav-toggle">
            <span class="title">ONE</span>
            <span class="selected"></span>
            </a>
         </li>
         <li class="nav-item start ">
            <a  ng-click="callTwo($event)" class="nav-link nav-toggle">
            <span class="title">TWO</span>
            <span class="selected"></span>
            </a>
         </li>
         <li class="nav-item start ">
            <a  ng-click="callThree($event)" class="nav-link nav-toggle">
            <span class="title">THree</span>
            <span class="selected"></span>
            </a>
         </li>
       
      </ul>
   </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。