ng-clickを使用してAngularJsクラスを削除する

Question

パスが一致したときにクラスを取得および削除するリンクがあり、完璧に機能します。これらのリンクのいずれもパスを持たないため、どのようにしてクラスを削除できますかlink1 link2をクリックした後の上記の？ link2 "who have no path"にクラスを挿入することができましたので、今すぐリンクをクリックしてlink1のクラスを削除します。

ありがとうございます。

HTML

<div class="sidebar-nav"> 
    <ul> 
    <li ng-class="{'current':getLocation('/url/test')}"> 
     <a href="#/url/test">link 1 
      <i class="pull-right fa fa-calendar-plus-o" aria-hidden="true"></i> 
     </a> 
    </li> 
    <li ng-click="current=!current" ng-class="{'current': current}" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
     <a>link 2 
     <i class="pull-right fa fa-circle" aria-hidden="true"></i></span></a> 
     <div class="collapse collapse-styled" id="collapseExample"> 
     <a href="#">sublink 1 
       <i class="pull-right fa fa-calendar" aria-hidden="true"></i> 
      </a> 
     <a href="#">sublink 2 
       <i class="pull-right fa fa-list" aria-hidden="true"></i> 
      </a> 
     </div> 
    </li> 
    </ul> 
</div> 

角度：

angular.module('components').controller('sidebarController', [ 
    '$location', 
    '$scope', 
    'jquery', 

    function($location, $scope, $) { 
    'use strict'; 

    $scope.getLocation = function(path) { 
     var Search = new RegExp('^' + path, ''); 
     return !!Search.exec($location.path()); 
    }; 
    } 
]); 

Answer 1

レティシアのは、リンクをコメントとして、類似した何かをします。関数にバインドする代わりに、link 1の現在のクラス条件を変数にバインドします。

テンプレート：コントローラで

<div class="sidebar-nav"> 
    <ul> 
    <li ng-click="getLocation('/url/test')" ng-class="{'current': activeLinks[1]}"> 
     <a href="#/url/test">link 1 
      <i class="pull-right fa fa-calendar-plus-o" aria-hidden="true"></i> 
     </a> 
    </li> 
    <li ng-click="linkClicked(2)" ng-class="{'current': activeLinks[2]}" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
     <a>link 2 
     <i class="pull-right fa fa-circle" aria-hidden="true"></i> 
     </a> 
    </li> 
    </ul> 
</div> 

：ここ

$scope.activeLinks = []; 

$scope.linkClicked = function(link) { 
    $scope.activeLinks.length = 0; 
    $scope.activeLinks[link] = true; 
} 

$scope.getLocation = function(path) { 
    var Search = new RegExp('^' + path, ''); 

    // test: suppose $location.path is /url/test 
    var locationPath = '/url/test'; 
    if(!!Search.exec(locationPath)) { 
     $scope.activeLinks.length = 0; 
     $scope.activeLinks[1] = true 
    }; 
}; 

、activeLinksアレイはリンクにcurrentクラスを設定するために使用されています。 activeLinks[1]が真の場合、link 1の場合、のクラス条件が真になります。 activeLinks[2]が真の場合、link 2の場合、のクラス条件が真になります。一度に1つのリンクだけが現在のクラスを持ち、他のリンクを間違えるようにします。

これを参照してくださいDEMO。