Angular JS를 사용하여 부트스트랩 네비게이션바의 액티브클래스를 설정하려면 어떻게 해야 하나요?
아이템이 있는 부트스트랩에 네비게이션바가 있는 경우
Home | About | Contact
각 메뉴 항목이 활성화되어 있을 때 해당 항목의 활성 클래스를 설정하려면 어떻게 해야 합니까? 「 」, 「 」를 설정하려면 해야 합니다.class="active"가 「」에 있는 .
#/#/about#/contact
매우 우아한 방법은 ng-controller를 사용하여 ng 뷰 밖에서 단일 컨트롤러를 실행하는 것입니다.
<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>
controllers.controllers에 포함:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
방금 했으니까, .bs-active-link<ul>하는 링크를 "Link를 추가합니다.active하는 「클래스」에의 클래스<li>
동작에 대해서는, http://jsfiddle.net/8mcedv3b/ 를 참조해 주세요.
HTML의 예:
<ul class="nav navbar-nav" bs-active-link>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Javascript:
angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
restrict: 'A', //use as attribute
replace: false,
link: function (scope, elem) {
//after the route has changed
scope.$on("$routeChangeSuccess", function () {
var hrefs = ['/#' + $location.path(),
'#' + $location.path(), //html5: false
$location.path()]; //html5: true
angular.forEach(elem.find('a'), function (a) {
a = angular.element(a);
if (-1 !== hrefs.indexOf(a.attr('href'))) {
a.parent().addClass('active');
} else {
a.parent().removeClass('active');
};
});
});
}
}
}]);
Angular Strap을 참조할 수 있습니다.네바 디렉티브는 원하는 것 같습니다.
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
.directive('bsNavbar', function($location) {
'use strict';
return {
restrict: 'A',
link: function postLink(scope, element, attrs, controller) {
// Watch for the $location
scope.$watch(function() {
return $location.path();
}, function(newValue, oldValue) {
$('li[data-match-route]', element).each(function(k, li) {
var $li = angular.element(li),
// data('match-rout') does not work with dynamic attributes
pattern = $li.attr('data-match-route'),
regexp = new RegExp('^' + pattern + '$', ['i']);
if(regexp.test(newValue)) {
$li.addClass('active');
} else {
$li.removeClass('active');
}
});
});
}
};
});
이 지시어를 사용하려면:
http://mgcrea.github.io/angular-strap/에서 Angular Strap 다운로드
부트스트랩.
<script src="lib/angular-strap.js"></script>이치노
angular.module('myApp', ['$strap.directives'])이치노
<div class="navbar" bs-navbar>항목에 을 추가합니다.
<li data-match-route="/about"><a href="#/about">About</a></li>
여기 Angular와 잘 맞는 간단한 방법이 있습니다.
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
각도 내JS 컨트롤러:
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
Angular 라우터를 사용하는 경우 RouterLinkActive 디렉티브를 매우 우아하게 사용할 수 있습니다.
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
<li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
<li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>
무엇보다도, 이 문제는 여러 가지 방법으로 해결될 수 있다.이 방법은 가장 우아하지는 않지만, 확실히 효과가 있습니다.
다음은 프로젝트에 추가할 수 있는 간단한 솔루션입니다.키오프에 사용할 수 있는 경로를 구성할 때 "pageKey" 또는 기타 속성을 추가할 수 있습니다.또한 $route 객체의 $routeChangeSuccess 메서드에 리스너를 구현하여 루트 변경이 정상적으로 완료될 때까지 리슨할 수 있습니다.
핸들러가 기동하면, 페이지 키를 취득해, 그 키를 사용해 이 페이지에 대해서 「ACTIVE」할 필요가 있는 요소를 특정해, ACTIVE 클래스를 적용합니다.
모든 요소를 만들 수 있는 방법이 필요합니다.액티브.보시다시피 네비게이션 항목의 .pageKey 클래스를 사용하여 모든 항목을 끄고 .pageKey_{를 사용하고 있습니다.PAGEKEY}를 클릭하여 개별적으로 활성화합니다.모든 항목을 비활성화하는 것은 단순한 접근법으로 간주됩니다.이전 경로를 사용하여 활성 항목만 비활성화하는 것으로 성능이 향상되거나, 비활성화할 활성 항목만 선택하도록 jquery selector를 변경할 수 있습니다.jquery를 사용하여 모든 활성 항목을 선택하는 것이 아마도 가장 좋은 해결책일 것입니다.이는 이전 루트에 존재할 가능성이 있는 cSS 버그가 발생했을 때 현재 루트의 모든 것이 확실하게 정리되기 때문입니다.
즉, 이 코드 행을 변경해야 합니다.
$(".pagekey").toggleClass("active", false);
이것에게
$(".active").toggleClass("active", false);
다음은 샘플 코드입니다.
부트스트랩 네비게이션바 지정
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
그리고 다음과 같은 각진 모듈과 컨트롤러:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>
'각의유틸'을 실제로 사용할 수 있습니다.ui-route★★★★
<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>
또는 다음과 같이 입력합니다.
헤더 컨트롤러
/**
* Header controller
*/
angular.module('myApp')
.controller('HeaderCtrl', function ($scope) {
$scope.menuItems = [
{
name: 'Home',
url: '/',
title: 'Go to homepage.'
},
{
name: 'About',
url: '/about',
title: 'Learn about the project.'
},
{
name: 'Contact',
url: '/contact',
title: 'Contact us.'
}
];
});
색인 페이지
<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
<ul class="nav navbar-nav navbar-right">
<li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
ng-repeat="menuItem in menuItems">
<a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
ui-utils를 사용하는 경우 부분/내포된 보기를 관리하기 위한 ui-router에도 관심이 있을 수 있습니다.
이 모든 답변들이 저한테는 좀 복잡한 것 같아요, 죄송합니다.그래서 네비게이션 바 단위로 동작하는 작은 지시문을 작성했습니다.
app.directive('activeLink', function () {
return {
link: function (scope, element, attrs) {
element.find('.nav a').on('click', function () {
angular.element(this)
.parent().siblings('.active')
.removeClass('active');
angular.element(this)
.parent()
.addClass('active');
});
}
};
});
사용방법:
<ul class="nav navbar-nav navbar-right" active-link>
<li class="nav active"><a href="home">Home</a></li>
<li class="nav"><a href="foo">Foo</a></li>
<li class="nav"><a href="bar">Bar</a></li>
</ul>
이를 달성하기 위해 $location과 함께 ng-class 디렉티브를 사용합니다.
<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
<a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Auditoria
<b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li data-ng-class="{active: ($location.path() == '/auditoria') }">
<a href="#/auditoria">Por Legajo</a>
</li>
<li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
<a href="#/auditoria/todos">General</a>
</li>
</ul>
</li>
</ul>
다음과 같은 $location 서비스에 액세스할 수 있는 메인 컨트롤러 내부에 네비게이션 바가 있어야 합니다.
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
ui-router를 사용하는 경우 다음 예시는 컨트롤러 측 코드를 추가하지 않고 승인된 답변에 대한 @DanPantry의 코멘트에 따라 요구를 충족시켜야 합니다.
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
<li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
자세한 내용은 문서를 참조하십시오.
이는 다음과 같은 각도 표현식의 조건을 사용하여 달성할 수 있습니다.
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
이 미니 로직의 많은 아웃소싱이 코드 베이스를 다소 오염시킬 수 있다고 해도, 보다 「적절한」방법이 되는 각도 지시가 있는 것은 사실입니다.
GUI 스타일링은 디렉티브 작성보다 조금 빠르기 때문에 가끔 조건부로 사용합니다.하지만 그들이 실제로 오랫동안 코드 베이스에 남아 있었던 사례는 말할 수 없습니다.결국 나는 그것을 지시로 바꾸거나 문제를 해결할 더 나은 방법을 찾는다.
Angular Strap을 사용하지 않는 것이 좋다면 이 지시문이 도움이 될 것입니다.이것은, https://stackoverflow.com/a/16231859/910764 의 변경입니다.
자바스크립트
angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
return {
restrict: 'A',
link: function postLink(scope, element) {
scope.$watch(function () {
return $location.path();
}, function (path) {
angular.forEach(element.children(), (function (li) {
var $li = angular.element(li),
regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
isActive = regex.test(path);
$li.toggleClass('active', isActive);
}));
});
}
};
}]);
HTML
<ul class="nav navbar-nav" bs-navbar>
<li data-match-route="/home"><a href="#/home">Home</a></li>
<li data-match-route="/about"><a href="#/about">About</a></li>
</ul>
주의: 위의 HTML 클래스는 Bootstrap 3.x 를 사용하고 있는 것을 전제로 하고 있습니다.
제 생각은 이렇습니다.이 게시물에서 찾은 답변의 조합입니다.조금 다른 케이스가 있었기 때문에 이 솔루션은 메뉴를 Ojbect 명령어 정의에서 사용할 자체 템플릿으로 분리한 후 필요한 페이지에 내 네비게이션 바를 추가하는 것입니다.기본적으로 메뉴를 포함하지 않는 로그인 페이지가 있었기 때문에 로그인 시 ngInclude를 사용하여 다음 디렉티브를 삽입했습니다.
지시:
module.directive('compModal', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: true,
templateUrl: 'templates/menu.html',
controller: function($scope, $element, $location){
$scope.isActive = function(viewLocation){
var active = false;
if(viewLocation === $location.path()){
active = true;
}
return active;
}
}
}
});
디렉티브 템플릿(templates/menu.html)
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
지령을 포함하는 HTML
<comp-navbar/>
도움이 되었으면 좋겠다
대답하자면, 이런 구조를 다루려면 이게 필요했어요.
- 인덱스
<- <-active
---event-list
---event-edit
map---event-map <-map
- - 소소
---place-list
(편집)
---place-map
따라서 조건에 맞게 포맷된 하위 링크를 검증하기 위해 일치시키는 대신 indexOf를 사용해야 했습니다.'이벤트'의 경우:
<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">
function NavController($scope, $location) {
$scope.isActive = function (viewLocation) {
var s=false;
if($location.path().indexOf(viewLocation) != -1){
s = true;
}
return s;
};}
이것은 간단한 해결책입니다.
<ul class="nav navbar-nav navbar-right navbar-default menu">
<li ng-class="menuIndice == 1 ? 'active':''">
<a ng-click="menuIndice = 1" href="#/item1">item1</a>
</li>
<li ng-class="menuIndice == 2 ? 'active':''">
<a ng-click="menuIndice = 2" href="#/item2">item2</a>
</li>
<li ng-class="menuIndice == 3 ? 'active':''">
<a ng-click="menuIndice = 3" href="#/item3">item3</a>
</li>
</ul>
이치노
이것은, 다음의 조작으로 간단하게 인라인을 실시할 수 있습니다.
<ul class="nav navbar-nav">
<li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
<li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>
링크를 클릭할 때마다 스위치오브젝트는 올바른 스위치오브젝트 속성만 있는 새로운 오브젝트로 대체됩니다.정의되지 않은 속성은 false로 평가되므로 해당 속성에 종속된 요소에는 활성 클래스가 할당되지 않습니다.
@Olivier의 AngularStrap의 답변과 함께 https://github.com/twbs/bootstrap/issues/9013의 kevinknelson의 답변도 구현했습니다.
기본적으로 Bootstrap3 navbar는 단일 페이지(예: Angular) 응용 프로그램용으로 설계되지 않았기 때문에 작은 화면에서 클릭해도 메뉴가 접히지 않습니다.
자바스크립트
/**
* Main AngularJS Web Application
*/
var app = angular.module('yourWebApp', [
'ngRoute'
]);
/**
* Setup Main Menu
*/
app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
$scope.menuItems = [
{
name: 'Home',
url: '/home',
title: 'Welcome to our Website'
},
{
name: 'ABOUT',
url: '/about',
title: 'Know about our work culture'
},
{
name: 'CONTACT',
url: '/contact',
title: 'Get in touch with us'
}
];
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}]);
HTML
<div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
<ul id="add-magic-line" class="nav navbar-nav navbar-right">
<li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
<a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
@Pylinux 덕분입니다.저는 그의 기술을 사용했고, 제가 필요로 했던 "한" 레벨의 드롭다운 메뉴(sub ul/li)를 지원하기 위해 그것을 수정했습니다.아래 바이올린 링크로 동작 상태를 확인하십시오.
pylinux의 답변을 기반으로 Fielin 업데이트 - http://jsfiddle.net/abhatia/en4qxw6g/
하기 위해 세 . 1단계는 3단계입니다.
리스트를가질 a" 대해 값 dd(했습니다.1 . 서브울 리스트가 필요한 li 아래의 "a" 요소에 대해 클래스 값 dd(드롭다운)를 추가했습니다.
<li><a class="dd">This link points to #/fun5</a>
<ul>
<li><a href="#/fun6?some=data">This link points to #/fun6</a>
</li>
<li><a href="#/fun7?some=data">This link points to #/fun7</a>
</li>
<li><a href="#/fun8?some=data">This link points to #/fun8</a>
</li>
<li><a href="#/fun9?some=data">This link points to #/fun9</a>
</li>
</ul>
</li>
과 같은 로직을 하였습니다.2 . Javascript를 업데이트하여 다음과 같은 새로운 로직을 추가하였습니다.
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3. CSS:
a.active {background-color:red;}
싱글 레벨의 드롭 다운 메뉴를 실장하고 싶은 유저에게 있어서 도움이 될 것입니다.
이 active-link 디렉티브는 https://stackoverflow.com/a/23138152/1387163에서도 사용할 수 있습니다.
위치가 /url과 일치하면 부모 li가 활성 클래스를 가져옵니다.
<li>
<a href="#!/url" active-link active-link-parent>
</li>
링크에 지시어를 사용할 것을 권장합니다.여기 바이올린이 있습니다.
하지만 아직 완벽하지는 않다.해시방에 주의하세요;)
다음은 디렉티브용 Javascript입니다.
angular.module('link', []).
directive('activeLink', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
html에서 사용하는 방법은 다음과 같습니다.
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
css를 사용한 후 스타일링:
.active{ color:red; }
토론에서 제 의견을 덧붙이자면 순수 각도 모듈(jquery 없음)을 만들었습니다.데이터를 포함한 해시 URL에서도 동작합니다(예: #/this/is/path?this=is&some=data)
하면 됩니다.auto-active같이 합니다.다음과 같이 합니다.
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>
모듈은 다음과 같습니다.
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());
* (물론 지시 부분만 사용 가능)
** 빈 해시(예: 빈 해시)에는 이 기능이 작동하지 않습니다. example.com/# 그냥 '그냥'일 수도 있어요.example.com ), 어, 어, 어, 어, 적, 적, )를 포함해야 합니다.example.com/#/ 그냥 '그냥'일 수도 있어요.example.com#/ngResource를 사용합니다.
- 다음은 바이올린입니다.http://jsfiddle.net/gy2an/8/
- 다음은 github입니다.https://github.com/Karl-Gustav/autoActive
- 저의 원래 답변은 다음과 같습니다.https://stackoverflow.com/a/22282124/1465640
이게 날 속였어
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just the first whatever which is usually your app name
그런 다음 jquery(angular와 함께 작업)를 사용하여 활성 클래스를 추가합니다.
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
물론 css:
.active{background:red;}
다음과 같은 html이 있으면 동작합니다.
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
www.somesite.com/ee의 가 '앱'이고 활성화 되어 있는 경우 페이지 URL을 사용하여 클래스를 활성화하고 배경을 빨간색으로 색칠합니다.
답변이 길지만, 저는 제 길을 공유하려고 합니다.
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
템플릿:
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
<li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
<li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>
하시는 분ui-router:
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a href="...">View 1</a></li>
<li ui-sref-active="active"><a href="...">View 2</a></li>
<li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>
사용하다$state.name === 'full/path/to/state' ★★★★★★★★★★★★★★★★★」ui-sref-active-eq="active"
여기 관심을 가질 만한 사람을 위한 또 다른 해결책이 있습니다.이 방법의 장점은 의존성이 적다는 것입니다.헉, 웹 서버 없이도 작동되네.즉, 완전히 클라이언트측입니다.
HTML:
<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
</ul>
</div>
설명:
에서 angularjs 합니다.ng-repeatselectTab() ★★★★★★★★★★★★★★★★★」getTabClass()이 네비게이션바의 컨트롤러에 정의되어 있습니다.
컨트롤러:
angular.module("app.NavigationControllersModule", [])
// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")
.controller("topNavBarCtrl", function($scope, activeTab){
// Model used for the ng-repeat directive in the template.
$scope.tabs = ["Page 1", "Page 2", "Page 3"];
var selectedTab = null;
// Sets the selectedTab.
$scope.selectTab = function(newTab){
selectedTab = newTab;
};
// Sets class of the selectedTab to 'active'.
$scope.getTabClass = function(tab){
return selectedTab == tab ? activeTab : "";
};
});
설명:
selectTab()메서드는 다음을 사용하여 호출됩니다.ng-click 하면 변수 " " " " 가 표시됩니다.selectedTab이 링크의 이름으로 설정됩니다.HTML에서 이 메서드는 홈 탭에 대한 인수 없이 호출되므로 페이지가 로드될 때 강조 표시됩니다.
getTabClass() 방법은 서서는 method method method method is is is is method method method method method 라고 합니다.ng-class이 한지 여부를 합니다.selectedTab일 를 반환하고 않으면 true에 의해 클래스 이름으로 되는 "active"를 반환합니다.ng-class그럼 클래스 css에 이든 간에active선택한 탭에 적용됩니다.
필요한 것을 됩니다.active- code - class (필요한 색상 코드 포함)
::ng-class="{'active': currentNavSelected}" ng-click="setNav"
언급URL : https://stackoverflow.com/questions/16199418/how-to-set-bootstrap-navbar-active-class-with-angular-js
'itsource' 카테고리의 다른 글
| 오류: vcvarsall.bat을 찾을 수 없습니다. (0) | 2022.12.04 |
|---|---|
| vue.flash 워치가 업데이트되지 않았습니다. (0) | 2022.12.04 |
| Image Magick 설치 확인 (0) | 2022.12.04 |
| JSON Jackson에 대한 날짜 형식 매핑 (0) | 2022.12.04 |
| 특성 함수를 재정의하고 재정의된 함수에서 호출하려면 어떻게 해야 합니까? (0) | 2022.12.04 |