如何動態更改活動類

錯誤發生在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; 
    }; 
});

和我的錯誤細節

Error: [$parse:syntax] Syntax Error: Token 'tab.id' is unexpected, expecting [:] at column 19 of the expression [panel.selecttab({{tab.id}})] starting at [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) at (http://localhost:63342/Talent/bower_components/angular/angular.js:78:12) at Parser.throwError (http://localhost:63342/Talent/bower_components/angular/angular.js:10534:11) at Parser.consume (http://localhost:63342/Talent/bower_components/angular/angular.js:10568:12) at Parser.object (http://localhost:63342/Talent/bower_components/angular/angular.js:10885:14) at Parser.primary (http://localhost:63342/Talent/bower_components/angular/angular.js:10504:22) at Parser.unary (http://localhost:63342/Talent/bower_components/angular/angular.js:10757:19) at Parser.multiplicative (http://localhost:63342/Talent/bower_components/angular/angular.js:10740:21) at Parser.additive (http://localhost:63342/Talent/bower_components/angular/angular.js:10731:21) at Parser.relational (http://localhost:63342/Talent/bower_components/angular/angular.js:10722:21) at Parser.equality (http://localhost:63342/Talent/bower_components/angular/angular.js:10713:21) > (anonymous function) angular.js:10061 (anonymous function) 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 (anonymous function) angular.js:1449 Scope.$eval angular.js:12673 Scope.$apply angular.js:12771 (anonymous function) angular.js:1447 invoke angular.js:3966 doBootstrap angular.js:1445 bootstrap angular.js:1459 angularInit angular.js:1368 (anonymous function) angular.js:21949 trigger angular.js:2573 (anonymous function) angular.js:2853 forEach angular.js:325 eventHandler angular.js:2852"

來源

2014-09-21 NANDIGAM VIJAY SAI

我覺得你在你的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>

來源

2014-09-21 14:30:25 bmceldowney

由於其工作 – 2014-09-21 14:59:06

如何動態更改活動類

回答

相關問題