如何动态更改活动类

Question

The error is at ul-> li -> a ng-click. 错误发生在ul-> li-> ng-click。 The class active is not changing when i clicked. 当我单击时，活动班级没有改变。 This is my index.html 这是我的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>

and my app.js is 而我的app.js是

talent.controller('headercontroller', function (){
    this.tab = 1;

    this.selecttab = function (setTab){
        this.tab = setTab;
    };

    this.isselected = function (checkTab){
        return this.tab === checkTab;
    };
});

and my error details are 我的错误详细信息是

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}})]. 错误：[$ 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 ) 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 （ 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 ) 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" 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“

Answer 1

I think your handlebars in your ng-click directive are superfluous. 我认为ng-click指令中的把手是多余的。 Try it without them: 在没有它们的情况下尝试：

<a ng-click="panel.selecttab(tab.id)" ui-sref="{{tab.name}}">{{tab.name}}</a>

Generally you only need the curly braces if you're binding to values in the bare markup, not in a directive. 通常，如果要绑定到裸标记中的值而不是指令中的值，则只需要花括号。

https://docs.angularjs.org/guide/templates https://docs.angularjs.org/guide/templates

Which means you probably don't want them in your ui-sref directive either: 这意味着您可能也不想在ui-sref指令中使用它们：

<a ng-click="panel.selecttab(tab.id)" ui-sref="tab.name">{{tab.name}}</a>

如何动态更改活动类

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-09-21 14:30:25

如何动态更改活动类

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-21 14:30:25

解决方案1
0 已采纳 2014-09-21 14:30:25