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

【问题标题】：How to add/remove class to the clicked parent link in Angular JS?如何向 Angular JS 中单击的父链接添加/删除类？
【发布时间】：2017-05-11 11:10:19
【问题描述】：

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

必须将类添加到单击的父级，即 nav-item start

这是我的代码

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/

你能告诉我怎么做吗

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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>

【讨论】：

请不要这样做，这违背了所有 Angular 的做法。永远不要在角度控制器中使用元素，而只能使用逻辑。然后模板应该使用控制器的变量来输出正确的 html

【解决方案2】：

最简单的方法是将ng-repeat 与ng-class 结合使用：

HTML：

<li class="nav-item start" 
    ng-repeat="link in links" 
    ng-class="{ active: activeLink === link.id }">
    <a ng-click="linkClicked(link)" class="nav-link nav-toggle">
      <span class="title">{{ link.title }}</span>
      <span class="selected"></span>
    </a>
</li>

控制器：

$scope.links = [{
    id: 1,
    title: "ONE"
}, {
    id: 2,
    title: "TWO"
}, {
    id: 3,
    title: "THREE"
}];

$scope.linkClicked = function(link) {
    $scope.activeLink = link.id;
}

查看这个 jsfiddle：http://jsfiddle.net/9fR23/449/

如果你不能让它动态化，你可以这样做：

<li ng-class="{ active: activeLink === 1}">
    <a ng-click="activeLink = 1">..</a>
</li>
<li ng-class="{ active: activeLink === 2}">
    <a ng-click="activeLink = 2">..</a>
</li>
<li ng-class="{ active: activeLink === 3}">
    <a ng-click="activeLink = 3">..</a>
</li>

【讨论】：