Question

我有一个angularjs应用程序，我正在尝试使用angularjs ng-class运算符在两个类之间切换。我已经尝试过使用三元运算符，并且已经采用旧的方式重新开始。以下是我的代码：

<span ng-class="{'expand':boolExpander,'undoExpand':!boolExpander, }" ng-init="boolExpander=false" ng-click="boolExpander=!boolExpander"></span>

span标签只是一个图标的持有者，它在css中定义如下：

.expand {
    background: url(../assets/icons/glyphicons/glyphicons/png/glyphicons_432_plus.png) no-repeat 6px center;
    width: 40px;
    height: 40px;
    display: block;
}

您可以想象undoExpand类选择不同的图标，但其他方面完全相同。

每当用户第一次点击时，angularjs应用程序抛出一个错误，“未定义不是一个函数”，然后再点击几次后，整个范围就会消失。

那是怎么回事？为什么？看起来这应该是直截了当的，只是工作。

以下是触发ng-Click时发生的整个错误：

TypeError: undefined is not a function
    at Object.h [as fn] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js:140:281)
    at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js:109:403)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js:112:398)
    at HTMLSpanElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js:194:147)
    at HTMLSpanElement.m.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:8436)
    at HTMLSpanElement.r.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:5146) angular.js:10061(anonymous function) angular.js:10061(anonymous function) angular.js:7357k.$digest angular.js:12531k.$apply angular.js:12777(anonymous function) angular.js:19093m.event.dispatch jquery.min.js:3r.handle

Answer 1

试试这个：

<span ng-class="{'expand':boolExpander,'undoExpand':!boolExpander }" ng-init="boolExpander=false" ng-click="boolExpander=!boolExpander"></span>

ng-class末尾的逗号生成错误。

Working example

Answer 2

这应该有效：

<span ng-class="(boolExpander) ? 'expand' : 'undoExpand'" ng-init="boolExpander='false'" ng-click="boolExpander=!boolExpander"></span>

Answer 3

正确的语法是

ng-class="{true:'expand',false:'undoExpand'}[boolExpander]"

Angularjs ng-class没有按预期工作

3 个答案:

Working example