SORU
24 NİSAN 2013, ÇARŞAMBA


Nasıl Açısal JS ile bootstrap gezinti çubuğu aktif sınıf uygularım

Öğeleri ile bootstrap bir gezinti çubuğu var

Home | About | Contact

Nasıl aktif olduğunda, her bir menü öğesi için etkin sınıf ayarlarım? Bu açısal yol ne zaman, nasıl class="active" ayarlayabilirsiniz

  1. Ev için #/
  2. Hakkında sayfası için #/about
  3. İletişim sayfası için #/contact

CEVAP
1 EYLÜL 2013, Pazar


Çok zarif bir şekilde ng-kontrol ng-view dışında tek bir kontrol çalıştırmak için kullanılır

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

ve controllers.js dahil:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • funbro1

    funbro1

    11 Aralık 2007
  • How to Cook ?

    How to Cook

    31 Ocak 2007
  • kamaniusilelis

    kamaniusilel

    10 HAZİRAN 2011