[英]How to dynamically change (add) the active state class to a navigation link
[英]how to change active class dynamically
錯誤發生在ul-> li-> ng-click。 當我單擊時,活動班級沒有改變。 這是我的index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8">
<title>Talent Exhibition</title>
<script type="text/javascript" language="javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" language="javascript" src="bower_components/angular-ui- router/release/angular-ui-router.js"></script>
<script type="text/javascript" language="javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" language="javascript" src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" language="JavaScript" src="app.js"></script>
<script type="text/javascript" language="JavaScript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body ng-app="talent">
<div ng-controller="navbarmenuController">
<div class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-brand">
<a href="index.html">Talent Exhibition</a>
</div>
<div ng-controller="navbarformcontroller">
<form class="navbar-form navbar-right" ng-submit="loginuser()">
<input type="email" ng-model="user.username" placeholder="Email" class="form-control" required>
<input type="password" ng-model="user.password" placeholder="Password" class="form-control" required>
<button class="btn btn-success" type="submit">Login</button>
</form>
</div>
</div>
</div>
<div class="container-fluid" id="sidebar">
<div class="row" ng-controller="headercontroller as panel">
<div class="col-sm-2 col-lg-2 col-md-2 hidden-xs jumbotron">
<ul class="nav nav-sidebar">
<li ng-repeat="tab in tabs" ng-class="{active : panel.isselected({{tab.id}})}"><a ng-click="panel.selecttab({{tab.id}})" ui-sref="{{tab.name}}">{{tab.name}}</a></li>
</ul>
</div>
<div class="col-lg-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="main" ui-view></div>
</div>
</div>
</div>
</body>
</html>
而我的app.js是
talent.controller('headercontroller', function (){
this.tab = 1;
this.selecttab = function (setTab){
this.tab = setTab;
};
this.isselected = function (checkTab){
return this.tab === checkTab;
};
});
我的錯誤詳細信息是
錯誤:[$ parse:syntax]語法錯誤:令牌'tab.id'是意外的,期望[:]位於表達式[panel.selecttab({{tab.id}})]的第19列,起始於[tab.id }})。 (
http://errors.angularjs.org/1.2.23/$parse/syntax?p0=tab.id&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=19&p3=panel.selecttab(%7B%7Btab.id%7D%7D)&p4=tab.id%7D%7D
在()http://localhost:63342/Talent/bower_components/angular/angular.js:78:12
)在Parser.throwError(http://localhost:63342/Talent/bower_components/angular/angular.js:10534:11
)在Parser.consume(http://localhost:63342/Talent/bower_components/angular/angular.js:10568:12
)中的分析器。http://localhost:63342/Talent/bower_components/angular/angular.js:10885:14
對象(http://localhost:63342/Talent/bower_components/angular/angular.js:10885:14
)(http://localhost:63342/Talent/bower_components/angular/angular.js:10504:22
)在Parser.unary(http://localhost:63342/Talent/bower_components/angular/angular.js:10757:19
)在Parser.multiplicative(http://localhost:63342/Talent/bower_components/angular/angular.js:10740:21
)在Parser.additive(http://localhost:63342/Talent/bower_components/angular/angular.js:10731:21
)在Parser.relational(http://localhost:63342/Talent/bower_components/angular/angular.js:10722:21
http://localhost:63342/Talent/bower_components/angular/angular.js:10722:21
)在Parser.equality(http://localhost:63342/Talent/bower_components/angular/angular.js:10713:21
)>(匿名函數)angular.js:10061(匿名函數)angular.js:7357 applyDirectivesToNode angular.js:6473 compileNodes angular.js:6036 compileNodes angular.js:6048 compile angular.js:5969 applyDirectivesToNode angular.js:6379 compileNodes angular.js:6036 compileNodes angular.js:6048 compileNodes angular.js:6048 compileNodes angular.js:6048 compileNodes angular.js:6048 compileNodes angular.js:6048 compileNodes angular.js:6048 compile angular.js:5969(匿名函數)angular.js:1449 Scope。$ eval angular .js:12673范圍$ apply angular.js:12771(匿名函數)angular.js:1447調用angular.js:3966 doBootstrap angular.js:1445 bootstrap angular.js:1459 angularInit angular.js:1368(匿名函數) angular.js:21949觸發器angular.js:2573(匿名函數)angular.js:2853 forEach angular.js:325 eventHandler angular.js:2852“
我認為ng-click
指令中的把手是多余的。 在沒有它們的情況下嘗試:
<a ng-click="panel.selecttab(tab.id)" ui-sref="{{tab.name}}">{{tab.name}}</a>
通常,如果要綁定到裸標記中的值而不是指令中的值,則只需要花括號。
https://docs.angularjs.org/guide/templates
這意味着您可能也不想在ui-sref
指令中使用它們:
<a ng-click="panel.selecttab(tab.id)" ui-sref="tab.name">{{tab.name}}</a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.